jQuery css()

jQuery - Manipulating CSS

jQuery offers several ways to interact with the style of HTML elements, primarily through the .css() method and class manipulation methods.

Using the .css() Method

The .css() method can be used to get the computed value of a single CSS property or set one or more CSS properties for the selected elements.

Get a CSS Property Value

To retrieve the current value of a specific CSS property for the first element in the matched set:

// Get the background color of the first paragraph
let bgColor = $("p").css("background-color");
console.log(bgColor); // Outputs the computed background color (e.g., "rgb(255, 255, 0)" or "transparent")

Set a Single CSS Property

To set a specific CSS property for all matched elements:

// Set the background color for all paragraphs
$("p").css("background-color", "yellow");

// Property names can be camelCased or hyphenated
$("p").css("fontSize", "1.2em"); // CamelCase
$("p").css("font-weight", "bold"); // Hyphenated

Set Multiple CSS Properties

To set multiple CSS properties at once, pass an object containing property-value pairs:

// Set background color and font size for all paragraphs
$("p").css({
  "background-color": "lightblue",
  "font-size": "110%",
  "padding": "10px" // Quotes around properties are optional if valid JS identifiers
});

Best Practice: Using Classes for Styling

While .css() is useful for getting style values or applying simple, dynamic style changes, it’s generally better practice to define styles in your CSS file using classes and then use jQuery to add or remove those classes.

Why use classes?

• Separation of Concerns: Keeps styling rules in CSS files and behavior logic in JavaScript files, making code cleaner and easier to maintain.
• Reusability: CSS classes can be easily reused across multiple elements and pages.
• Performance: Manipulating classes is often more performant than setting multiple inline styles directly.
• Maintainability: Easier to update styles site-wide by modifying the CSS file rather than searching through JavaScript code.

jQuery Class Manipulation Methods:

• .addClass(): Adds one or more classes to the selected elements.
• .removeClass(): Removes one or more classes from the selected elements.
• .toggleClass(): Adds the specified class(es) if not present, or removes it if present.
• .hasClass(): Checks if any of the selected elements have a specific class.

Example using classes:

style.css

.highlight {
  background-color: yellow;
  font-weight: bold;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

script.js

// Add highlight class to all paragraphs
$("p").addClass("highlight");

// Remove highlight class from the first paragraph
$("p").first().removeClass("highlight");

// Toggle the disabled class on a button
$("#myButton").toggleClass("disabled");

// Check if an element is highlighted
if ($("#myDiv").hasClass("highlight")) {
  console.log("Div is highlighted!");
}

Use .css() when you need to get a computed style value or apply a very specific, dynamic style that isn’t easily represented by a predefined class. For most styling changes triggered by user interaction or application state, prefer manipulating classes.

Further Learning

For a complete overview of all jQuery CSS and class manipulation methods, consult the official jQuery API documentation.