jQuery css() Method
CSS is the language for describing the presentation of Web pages , including colors, layout, and fonts. It brings style to your web pages by interacting with HTML elements . The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. The jQuery css() methods enables you to get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.Get styles from the web page
$("p").css("background-color");
<p style="background-color:blue">Get CSS style</p>
Browser ViewGet CSS style
<html>
<head>
<title>jQuery get CSS value example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<button id="btn">Get Val</button>
<p style="background-color:blue">Get CSS style</p>
</body>
</html>
Set styles on the web page
The css(property, value) method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.
$("p").css("background-color","yellow");
<p style="background-color:blue">Set CSS style</p>
Browser ViewSet CSS style
<html>
<head>
<title>jQuery set CSS Value example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<button id="btn">Set Val</button>
<p style="background-color:blue">Set CSS style</p>
</body>
</html>
Set multiple styles on the web page
Syntax
$(selector).css({"propertyname":"value","propertyname":"value",...});
Apply multiple CSS properties using a single JQuery method CSS( {propertyname1:value1, propertyname2:value2....). You can apply as many properties as you like in a single call. We can define object literal in curly braces ({}) . propertyname and value pair are defined with the help of colon like Key:Value and multiple keys are separated by comma as defined in above code.
$("p").css({"background-color":"yellow","border": "2px solid green"});
<p style="background-color:blue">Set CSS style</p>
Browser ViewSet CSS style
<html>
<head>
<title>jQuery Set multiple styles example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
$("p").css({"background-color":"yellow","border": "2px solid green"});
});
});
</script>
</head>
<body>
<button id="btn">Set Val</button>
<p style="background-color:blue">Set CSS style</p>
</body>
</html>
Related Topics