Server-Driven Web Apps with htmx

Styling Methods

The following table summarizes the htmx methods related to styling. These methods enable dynamically changing the CSS properties that are applied to elements by changing their CSS classes.

Method	Description
htmx.addClass	adds a CSS class to an element
htmx.removeClass	removes a CSS class from an element
htmx.takeClass	modifies all sibling elements so only one has a given CSS class
htmx.toggleClass	toggles the presence of a CSS class on an element

All of these methods except htmx.takeClass have a DOM equivalent.

For example, the following sets of statements are equivalent. Assume the variable sel holds a CSS selector string, the variable el holds a DOM element, and the variable cl holds a CSS class name.

UtilizingJsApi/styling.js

htmx.addClass(sel, ...