Change CSS Style using jQuery Api Css() Method

jQuery css () Method – how to use this method with selected css elements. Here you will learn how use css() method.

jQuery css() Method

Using the CSS () method is used to get or set the style properties or cssues ​​for the selected elements. This lets you can set & get one or more style properties.

Syntax

$(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 of css() method

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 of css() method

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 of jquery css method

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.

Spread the love

Be First to Comment

Leave a Reply

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