addClass

Jump to bottom

Jason Godesky edited this page Mar 31, 2024 · 2 revisions

This function adds a new class to an HTMLElement object.

Parameters

el: This is the HTMLElement object that you would like to add a new class to.
classes: The class or classes that you would like to add to the HTMLElement object. As of v0.2.4, this can include strings and/or `null` values. The `null` values are filtered out, but this allows you to use ternary operators in the same array where you define your classes for conditional classes, without extra filtering operations.

Examples

In each of the examples below, let’s assume that you have a body like this:

<body>
  <p id="example">Hello, world!</p>
</body>

The comments in each example show what you can expect the body of the page to be after running the code.

Add a class

import { addClass } from 'unobtrusive-dom'

const p = document.getElementById('example')
addClass(p, 'foo')

// <body>
//   <p id="example" class="foo">Hello, world!</p>
// </body>

Add multiple classes

import { addClass } from 'unobtrusive-dom'

const p = document.getElementById('example')
addClass(p, 'foo', 'bar')

// <body>
//   <p id="example" class="foo bar">Hello, world!</p>
// </body>