addClass, toggleClass and css() with CSS Custom Properties

Classes for state, variables for tuning

Use classes for discrete states (open, compact, error) and CSS custom properties for continuous values (hue, radius, progress). .css() writes custom properties with setProperty and never appends px to them, so .css('--hue', 200) means exactly 200.

For ordinary properties, numbers become pixels automatically — except unitless ones such as opacity, z-index and line-height. Reading a property returns the computed value.

Live · Theme tuner

Accent hue: 230

Corner radius: 14px

NEW

Patch cable, 30 cm

Braided, gold-plated, guaranteed to make your modules talk.

View the source for this demo

HTML

<div class="tuner">
  <div class="field"><label for="t-hue">Accent hue: <span id="t-hue-v">230</span></label><input id="t-hue" type="range" min="0" max="360" value="230"></div>
  <div class="field"><label for="t-rad">Corner radius: <span id="t-rad-v">14</span>px</label><input id="t-rad" type="range" min="0" max="32" value="14"></div>
  <div class="row"><button type="button" id="t-compact" aria-pressed="false">Compact</button><button type="button" id="t-shadow" aria-pressed="false">Elevated</button></div>
</div>
<div id="preview" class="pv">
  <span class="pv-badge">NEW</span>
  <h4>Patch cable, 30 cm</h4>
  <p>Braided, gold-plated, guaranteed to make your modules talk.</p>
  <button type="button" class="pv-btn">Add to rack</button>
</div>
<pre class="out" id="css-out" aria-live="polite"></pre>

JavaScript

const $pv = $('#preview');

function report(note) {
  $('#css-out').text(note + '\n' +
    "css('--accent-h')     → " + $pv.css('--accent-h') + '\n' +
    "css('border-radius')  → " + $pv.css('border-radius') + '\n' +
    "hasClass('compact')   → " + $pv.hasClass('compact') + '\n' +
    "hasClass('elevated')  → " + $pv.hasClass('elevated'));
}

$('#t-hue').on('input', function () {
  $pv.css('--accent-h', this.value);     // custom property: no px added
  $('#t-hue-v').text(this.value);
  report('One custom property re-themes border, badge, button and shadow.');
});

$('#t-rad').on('input', function () {
  $pv.css('--r', this.value + 'px');
  $('#t-rad-v').text(this.value);
  report('Radius flows to every corner through calc().');
});

$('#t-compact, #t-shadow').on('click', function () {
  const cls = this.id === 't-compact' ? 'compact' : 'elevated';
  $pv.toggleClass(cls);
  $(this).attr('aria-pressed', String($pv.hasClass(cls)));
  report(".toggleClass('" + cls + "')");
});

report('Drag a slider or toggle a class.');

More examples

Common patterns

JavaScript

$('.tab').removeClass('active').eq(2).addClass('active');
$('#menu').toggleClass('open', isOpen);          // force on/off
$('.bar').css({ width: 240, opacity: .8 });       // width → 240px, opacity stays .8
$(':root').css('--brand', '#6c5ce7');             // theme the whole page

API

.addClass(names) → self

Add one or more classes.

Reference: .addClass() →

.removeClass([names]) → self

Remove classes; with no argument, removes all classes.

Reference: .removeClass() →

.toggleClass(names [, force]) → self

Toggle classes, optionally forcing on/off with a boolean.

Reference: .toggleClass() →

.hasClass(name) → boolean

True if any element in the set has the class.

Reference: .hasClass() →

.css(name [, value]) · .css(object) → string | self

Get a computed style from the first element, or set styles on all. Numbers become px except for unitless properties. Custom properties (--name) are read with getPropertyValue and written without px.

Reference: .css() →

Migrating

Coming from jQuerySame API. jsKjs also reads custom properties with .css("--name") (returns the trimmed computed value).

Related features

Core

Classes & CSS