Hello Readers,
Probably, we need to add css property in HTML tag using jQuery.
Here I am describing different kinds of syntax to adding style property using jQuery
1.) If you want to add single css property using jquery, then you can use following syntax for the same task.
Syntax:
css("propertyname","value");
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "#c00");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p >This third paragraph.</p>
<p>This is fourth paragraph.</p>
<button>Set multiple styles for p</button>
</body>
</html>
In above example, i have added a single CSS property (background-color).
2.) If you want to add multiple css property using jquery, then you can use any the following syntax.
Syntax-1:
css({"propertyname":"value","propertyname":"value",...});
Or you can use the below Syntax for the same
Syntax-2:
css({ propertyname:"value" ,propertyname:"value", ...});
Or you can also use he below Syntax for the same
Syntax-3:
attr( "style", "propertyname:value; propertyname:value; propertyname: value; ....");
Example for Syntax-1:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "#c00", "font-size": "200%", "color":"#fff"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#8f8f8f">This is first paragraph.</p>
<p style="background-color:#00ff00">This is second paragraph.</p>
<p style="background-color:#0000ff">This is third paragraph.</p>
<p>This is a paragraph.</p>
<button>Set multiple styles for p</button>
</body>
</html>
Example for Syntax-2:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({backgroundColor: "#c00", fontSize: "200%", color:"#fff"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#8f8f8f">This is first paragraph.</p>
<p style="background-color:#00ff00">This is second paragraph.</p>
<p style="background-color:#0000ff">This is third paragraph.</p>
<p>This is a paragraph.</p>
<button>Set multiple styles for p</button>
</body>
</html>
Notice (In above examples: Syntax-1 and Syntax-2 ) that with the DOM notation, the quotation marks(" ") around the property names are optional, but with CSS notation they are required.
If you are not using the quotation marks with property name, then you need to remove hyphen(-) from the property name and also need to capitalize first character after hyphen in property name.
e.g.: you need to change background-color to backgroundColor OR font-size to fontSize.
Example for Syntax-3: You can also use attr along with style:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").attr("style", "background-color: #c00; font-size: 200%; color: #fff;");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#8f8f8f">This is first paragraph.</p>
<p style="background-color:#00ff00">This is second paragraph.</p>
<p style="background-color:#0000ff">This is third paragraph.</p>
<p>This is a paragraph.</p>
<button>Set multiple styles for p</button>
</body>
</html>
Thanks
0 Comment(s)