Add class to `<html>` with JavaScript?

javascript

prompt-engineering

best-practices

cross-browser-solutions

byAlex Kataev·Nov 27, 2024

Easily add a new class to your <html> tag using this quick JavaScript command:

document.documentElement.classList.add('new-class');

This snippet immediately targets the root <html> element and appends 'new-class' to its class list, enabling related CSS styling or JavaScript functionality out of the box.

className vs classList

The old-school way: className

For nostalgics who enjoy the smell of vanilla JS, there’s a direct but slightly clunky way to add classes and keep the existing ones:

// Not the prettiest kid in the block, but it gets the job done!
document.documentElement.className += ' new-class';

Remember to put a space before your class name to avoid mutating the class into something like .existingClassnew-class.

The facelift: classList

For aesthetes who nod at the mention of modern JavaScript, classList got you covered. It's a cleaner, safer way to play with classes as it handles spacing and duplication issues for you:

// Adding class had never been this sexy!
document.documentElement.classList.add('another-class');

To show off, you can add multiple classes at once:

// Because one is never enough!
document.documentElement.classList.add('first-class', 'second-class');

Cross-browser solutions & legacies

Shout out to the old guys: legacy browsers

With classList, always cross-check with your favorite browser compatibility guide like caniuse.com. Running an antique as IE9? You might need a workaround or a polyfill.

The Swiss Army Knife: jQuery

Despite being somewhat out of the spotlight, jQuery remains helpful for a cross-browser solution:

// "I may be old, but I can still rock your world!" - jQuery probably
$("html").addClass("myClass");

Sizing and dancing around in the existing codebase can be tricky. Always be wary of playing too rough with the existing scripts to avoid script conflicts, especially when these scripts rely on className for styling:

// "No scripts were harmed in the making of this class."

Cross-checks & best practices

Like any other DOM manipulation, dynamically adding classes can impact accessibility. Ensure your site remains navigation friendly for users with assistive technology.