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>