jQuery - css() Method
The method css() function is used to set or returns a style property for the chosenHTML element.
You can also search for these topics, define important jquery css method, css selector method using jquery, multiple jquery css method,
example.
Return a CSS Property
The css("propertyname") function is used to get the value of a
specific CSS property of a specific HTML element.
Note:- The value of the FIRST matched element will be returned, if multiple elements are found.
Syntax:
css("propertyname"); Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
alert("Font size = " + $("#p1").css("font-size"));
alert("Text color = " + $("#p1").css("color"));
});
});
</script>
</head>
<body>
<p id="p1" style="font-size:large; color:green">This is a paragraph.</p>
<button id="b1">Get CSS Values</button>
</body>
</html> Output :-
This is a paragraph.
Related Links
You can also search for these topics, return a css selector property and value, return a css property space between elements,
declare and return, css property default value returned, display inline block property, background color, max width, example.
Set a Single / Multiple CSS Property
The css("propertyname","value") function is used to set a particular CSS property
of an specified HTML element or All matched elements.
Use the following syntax to assign single property:
css("propertyname","value"); Use the following syntax to assign multiple properties at once:
css({"propertyname1":"value1","propertyname2":"value2",...}); Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b3").click(function () {
$("#p3").css("background-color", "orange");
});
$("#b4").click(function () {
$("#p3").css({ "color": "blue", "font-size": "xx-large" });
});
});
</script>
</head>
<body>
<p id="p3">This is a paragraph.</p>
<button id="b3">Set Background Color</button><br /><br />
<button id="b4">Set Text Color and Size</button>
</body>
</html> Output :-
This is a paragraph.
Related Links
You can also search for these topics, how to set css class property using jquery, set src property, jquery selectors to set a css
property, set multiple css properties, syntax and example for set a css property, add multiple css property example, jquery set multiple
css properties at once, not working.