jQuery — CSS

Get CSS Value

var color = $("h1").css("color");
var width = $("div").css("width");
console.log(color, width);

Set Single CSS Property

$("h1").css("color", "red");
$("div").css("background-color", "#f0f0f0");

Set Multiple Properties

$("h1").css({
    color: "red",
    "font-size": "24px",
    "background-color": "#f0f0f0",
    border: "1px solid #ccc"
});

CSS vs addClass

/* In stylesheet */
.highlight { color: red; font-weight: bold; }

// Better: use classes
$("h1").addClass("highlight");

// Inline (avoid when possible)
$("h1").css({ color: "red", "font-weight": "bold" });

Relative CSS Values

$("div").css("width", "+=50px");
$("div").css("opacity", "-=0.1");

Practical Examples

// Responsive font size
$("h1").css("font-size", function() {
    return $(window).width() < 600 ? "16px" : "24px";
});

// Dynamic background
$("body").css("background-color", "rgb(" +
    Math.floor(Math.random() * 255) + "," +
    Math.floor(Math.random() * 255) + "," +
    Math.floor(Math.random() * 255) + ")"
);

Mini Practice

1. Get an element's current color
2. Set multiple CSS properties
3. Use relative CSS values
4. Change CSS based on screen size

Up Next

Continue with Dimensions — getting element width, height, and position.