Jquery css() method
Advertisements
css() method
css() method are used for sets or returns css (style) property on selected elements.
Return a css property
You can return css property of any elements. In below example css() method return background-color of <p> elements.
Syntax
css("propertyname");
Example of css()
<!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(){
alert("Background color = " + $("#para").css("background-color"));
});
});
</script>
</head>
<body>
<p id="para" style="background-color:#99FF33">This is first paragraph.</p>
<p style="background-color:#3399FF">This is second paragraph.</p>
<button>Return background-color of p</button>
</body>
</html>
Output
This is first paragraph
This is second paragraph
Set css property
Using css() you can also set the property of css on any Html elements. In below example set the background color for all matched elements.
Syntax
css("propertyname","value");
Example of css()
<!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(){
$(".para").css("background-color", "cyan");
});
});
</script>
</head>
<body>
<p class="para" style="background-color:#99FF33">This is first paragraph.</p>
<p class="para" style="background-color:#3399FF">This is second paragraph.</p>
<p style="background-color:#FF3399">This is third paragraph.</p>
<button>Return background-color of p</button>
</body>
</html>
Output
This is first paragraph.
This is second paragraph.
This is third paragraph.
Set multiple css property
Using css() you can also set multiple properties of css on any Html elements at a time. In below example set the background-color, text color, and font-size for all matched elements.
Syntax
css({"propertyname":"value","propertyname":"value",...});
Example of css()
<!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(){
$(".para").css({"background-color": "cyan", "color":"blue", "font-size": "150%"});
});
});
</script>
</head>
<body>
<p class="para" style="background-color:#99FF33">This is first paragraph.</p>
<p class="para" style="background-color:#3399FF">This is second paragraph.</p>
<p style="background-color:#FF3399">This is third paragraph.</p>
<button>Return background-color of p</button>
</body>
</html>
Output
This is first paragraph.
This is second paragraph.
This is third paragraph.
Google Advertisment