How to change CSS Property using jQuery

How to change CSS Property using jQuery

To get and set/change css property using jQuery; In this tutorial, you will learn how to change CSS properties like background color, font size, styling, font color etc, of html elements using jQuery css() method.

How to change CSS Property using jQuery

Using the jQuery CSS () method is used to get or set the style/css properties ​​for the selected elements.

Syntax of jQuery css() method

$(selector).css("propertyname"); 

This can use to get css property of element.

$(selector).css("propertyname","value");

This can use to set css property of element.

$(selector).css({"propertyname":"value","propertyname":"value",…}); 

It can use to set multiple css properties of elements.

Example 1 – To get css property of html element using jQuery css()

It can use to get the value of a specified CSS property.

<!DOCTYPE html>  
<html>  
<title>Learn Jquery Css Method</title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#btn_click").click(function(){  
        alert("Background color = " + $("p").css("background-color"));  
    });  
});  
</script>  
</head>  
<body>  
<p style="background-color:#ff0000">The background-color of this paragraph is red.</p>  
<p style="background-color:#00ff00">The background-color of this paragraph is green.</p>  
<p style="background-color:#0000ff">The background-color of this paragraph is blue.</p>  
<button id="btn_click">Click here to get all css property</button>  
</body>  
</html>  

Example 2 – To get all matched css property of html element using jQuery css()

This property is used to determine a specific value for all matching elements.

<!DOCTYPE html>  
<html>  
<title>Learn Jquery val Method</title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){  
    $("#btn_click").click(function(){  
        $("p").css("background-color", "green");  
    });  
});  
</script>  
</head>  
<body>  
<p style="background-color:#ff0000">The background-color of this paragraph is red.</</p>  
<p style="background-color:#00ff00">The background-color of this paragraph is green.</</p>  
<p style="background-color:#0000ff">The background-color of this paragraph is blue.</</p>  
<p>This paragraph has no background-color. </p>  
<button id="btn_click">Click here to set background color of all matched content</button>  
</body>  
</html>  

In the above example, you can see that, set the all matched property background color using css() method.

Example 3 – To set/change all css property of html element using jQuery css()

This method gives you the convenience of adding multiple property values ​​together.

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#btn_button").click(function(){  
        $("p").css({"background-color": "green", "font-size": "300%"});  
    });  
});  
</script>  
</head>  
<body>   
<p style="background-color:#ff0000">The background-color of this paragraph is red.</p>  
<p style="background-color:#00ff00">The background-color of this paragraph is green.</p>  
<p style="background-color:#0000ff">The background-color of this paragraph is blue.</p>  
<button id="btn_button">Click here to set multiple styles for all selected elements.</button>  
</body>  
</html>  

In the above example 3 , you can see that, set the all matched mutlitple property background color, font-size using css() method.

Recommended jQuery Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *