jQuery CSS Manipulation

jQuery makes it easy to read and change the visual appearance of elements on a page by modifying their CSS properties and classes. This can be done dynamically — in response to events, timers, or user interactions — without refreshing the page.

The css() Method

The css() method is used to both get and set CSS property values on selected elements.

Getting a CSS Value

var color = $("p").css("color");
console.log(color);    // e.g., "rgb(0, 0, 0)"

Setting a Single CSS Property

$("h1").css("color", "blue");
$("p").css("font-size", "18px");

Setting Multiple CSS Properties at Once

Pass a JavaScript object with multiple property-value pairs.

$("#banner").css({
  "background-color": "navy",
  "color": "white",
  "padding": "20px",
  "border-radius": "8px"
});

Adding and Removing Classes

Directly setting CSS properties with css() mixes style logic into JavaScript. A better approach is to define styles in a CSS class and use jQuery to add or remove that class.

addClass()

$("p#intro").addClass("highlighted");

// Adding multiple classes at once
$("p#intro").addClass("highlighted large-text");

removeClass()

$("p#intro").removeClass("highlighted");

// Remove multiple classes at once
$("p#intro").removeClass("highlighted large-text");

// Remove ALL classes from the element
$("p#intro").removeClass();

toggleClass()

Adds a class if the element does not already have it; removes it if it does. Very useful for on/off style switches.

<button id="modeBtn">Toggle Dark Mode</button>
<div id="content">Main content area</div>

<script>
$(function() {
  $("#modeBtn").click(function() {
    $("#content").toggleClass("dark-mode");
  });
});
</script>

The first click adds dark-mode, the second removes it, the third adds it again — and so on.

hasClass()

Checks whether an element has a specific class. Returns true or false.

if ($("#sidebar").hasClass("collapsed")) {
  console.log("Sidebar is collapsed.");
} else {
  console.log("Sidebar is expanded.");
}

Reading Computed Dimensions

width() and height()

Returns the content width/height of an element (excludes padding, border, and margin).

var w = $("#mainBox").width();
var h = $("#mainBox").height();

outerWidth() and outerHeight()

Includes padding and border. Passing true also includes the margin.

var totalWidth = $("#mainBox").outerWidth(true);    // Includes margin

Getting Element Position

offset()

Returns the position of the element relative to the top-left corner of the document.

var pos = $("#myDiv").offset();
console.log("Top: " + pos.top + ", Left: " + pos.left);

position()

Returns the position relative to the nearest positioned parent element.

var pos = $("#myDiv").position();
console.log("Top: " + pos.top + ", Left: " + pos.left);

Practical Example: Interactive Highlight

<p id="quote">The only limit is your imagination.</p>
<button id="highlightBtn">Highlight</button>
<button id="resetBtn">Reset</button>

<script>
$(function() {
  $("#highlightBtn").click(function() {
    $("#quote").addClass("highlighted");
  });
  $("#resetBtn").click(function() {
    $("#quote").removeClass("highlighted");
  });
});
</script>

Key Points

• css() gets or sets CSS property values directly on an element.
• It is better practice to use classes for styling and toggle them with addClass(), removeClass(), and toggleClass().
• hasClass() is useful for conditional logic based on an element's current state.
• width() and height() return content dimensions; outerWidth(true) / outerHeight(true) include all spacing.
• Separating style logic (CSS) from behavior (jQuery) keeps code organized and maintainable.