Query - CSS

Add, remove, and toggle classes. Get and set inline styles and CSS variables.

Classes

addClass

$('selector').addClass(className);

Adds one or more space-separated classes to matched elements.

Parameters

Returns

Query object (for chaining).

Usage

$('p').addClass('highlighted');

Example

removeClass

$('selector').removeClass(className);

Removes one or more space-separated classes from matched elements.

Parameters

Returns

Query object (for chaining).

Usage

$('button').removeClass('disabled');

Example

toggleClass

$('selector').toggleClass(className);

Toggles one or more space-separated classes on matched elements.

Parameters

Returns

Query object (for chaining).

Usage

$('li').toggleClass('active');

Example

hasClass

$('selector').hasClass(className);

Tests if any matched element has the specified class.

Parameters

Returns

true if any element has the class, false otherwise.

Usage

if ($('p').hasClass('important')) {
  console.log('Found important paragraph');
}

Example

Styles

css

$('selector').css(property);
$('selector').css(property, value);
$('selector').css({ property: value, ... });

Gets or sets inline CSS properties.

Parameters

Returns

• Getting: The CSS property value
• Setting: Query object (for chaining)

Usage

Get

const color = $('p').css('color');

Set

$('p').css('color', 'blue');

Set Multiple

$('p').css({
  color: 'blue',
  fontSize: '16px'
});

Example

computedStyle

$('selector').computedStyle(property);

Gets the computed (rendered) value of a CSS property.

Alias for css(property, null, { includeComputed: true })

Performance This triggers a browser reflow. Use css() when you only need inline styles.

Parameters

Returns

The computed CSS value as it appears on screen.

Usage

const fontSize = $('p').computedStyle('font-size'); // "16px"

Example

cssVar

$('selector').cssVar(name);
$('selector').cssVar(name, value);

Gets or sets CSS custom properties (variables). The -- prefix is added automatically.

Parameters

Returns

• Getting: The CSS variable value
• Setting: Query object (for chaining)

Usage

Get

const color = $(':root').cssVar('primary-color');

Set

$(':root').cssVar('primary-color', '#0056b3');

Example