Getting and Setting CSS Rules
In this page:
Reading CSS Values
Calling .css(property) with just a property name returns that style's current computed value as a string, without changing anything. This reflects the actual rendered style, including values inherited from a stylesheet, not just inline styles you set yourself.
Example: Reading CSS Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text" style="color: blue;">Text</p>
<script>
console.log($("#text").css("color"));
</script>
</body>
</html>Setting One CSS Property
Pass a property name and a value to css() to change one CSS rule directly on the element, such as setting its color or display. jQuery applies the change as an inline style, which takes priority over most stylesheet rules.
Example: Setting One CSS Property
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").css("color", "red");
</script>
</body>
</html>Setting Multiple CSS Properties
Pass an object of property/value pairs to css() when you want to change several properties in a single call, such as setting color, background, and padding together. This avoids chaining multiple separate css() calls for related style changes.
Example: Setting Multiple CSS Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").css({color: "white", background: "black", padding: "10px"});
</script>
</body>
</html>Using Relative Values
Some CSS properties accept relative values such as += and -= when set through css(), letting you increase or decrease a numeric style relative to its current value. This is handy for animations or incremental adjustments without first reading the value yourself.
Example: Using Relative Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="font-size:16px">Box</div>
<script>
$("#box").css("font-size", "+=4px");
</script>
</body>
</html>Reading Several CSS Values
You can read several CSS properties from the same element by calling css() with an array of property names, getting back an object of all the requested values at once. This saves making several separate calls when you need to inspect multiple styles together.
Example: Reading Several CSS Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text" style="color:blue;font-size:18px">Text</p>
<script>
console.log($("#text").css(["color", "font-size"]));
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: