Get and Set CSS Property in jQuery

jQuery get set css properties; Through this tutorial, i am going to show you how to set/change or get html elements css style properties using jQuery css() method by tag(div, span, p, etc), id, name and class.

jQuery set or get html element like div, p tag etc, background color, font size, on click tutorial; So i will use jQuery CSS () method, which is used to get or set/change the css style properties ​​for the selected html elements like div, span, textarea, page tag, etc.

Get and Set CSS Property in jQuery

  • Defination jQuery CSS() Method
  • Syntax jQuery CSS() Method
  • Example 1 – jQuery Get Element Background Color
  • Example 2 – jQuery Set/Change HTML Element(div, p tag) Background Color onClick
  • Example 3 – jQuery Change/Set Font Size and Color onClick

Defination jQuery CSS() Method

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

Syntax 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 – jQuery Get Element Background Color

To get element specified CSS property using jQuery; so use the below example:

<!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(){  
        var p = $("p").css("background-color");  
        $('#properties').text(p);
    });  
});  
</script>  
</head>  
<body>  
<p style="background-color:#ff0000">The background-color of this paragraph is red.</p>  
<span id="properties">color property</span> <br> <br>

<button id="btn_click">Click here to get all css property</button>  
</body>  
</html>  

Example 2 – jQuery Set/Change HTML Element(div, p tag) Background Color onClick

To set/change html element like p tag, div, etc background-color using jQuery css(); so use the following example:

<!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 – jQuery Change/Set Font Size and Color onClick

To change/set font size and color onclick using jQuery css() method; so use the following example:

<!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>  

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

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