Element.Classname in JavaScript

In JavaScript, the element.className property is used to get or set the class attribute of an HTML element. The class attribute is used to specify one or more class names for an element, which can be used to apply CSS styles, target elements with JavaScript, and more.

Getting the Class Name of an Element

To get the class name of an element in JavaScript, we can simply access the className property of the element object. For example:

const element = document.querySelector('.my-element');
const className = element.className; // returns a string of class names
console.log(className); // outputs "my-element some-other-class"

In this example, we're using the querySelector method to select an element with the class name my-element. We're then accessing the className property of the element object, which returns a string of all the class names applied to the element. We can then use this string to perform further actions, such as manipulating the class names with JavaScript.

Setting the Class Name of an Element

To set the class name of an element in JavaScript, we can again access the className property of the element object. However, in this case, we'll be setting the property rather than reading it. For example:

const element = document.querySelector('.my-element');
element.className = 'new-class';

In this example, we're using the querySelector method to select an element with the class name my-element. We're then setting the className property of the element object to a new string, which replaces any existing class names on the element.

Adding and Removing Classes

In addition to getting and setting the class name of an element, we can also add and remove classes from an element using the element.classList property. This property returns a DOMTokenList object, which has methods for adding, removing, and toggling classes on an element.

Adding Classes

To add a class to an element, we can use the add method of the classList object. For example:

const element = document.querySelector('.my-element');
element.classList.add('new-class');

In this example, we're using the querySelector method to select an element with the class name my-element. We're then using the add method of the element's classList object to add a new class name to the element.

Removing Classes

To remove a class from an element, we can use the remove method of the classList object. For example:

const element = document.querySelector('.my-element');
element.classList.remove('old-class');

In this example, we're using the querySelector method to select an element with the class name my-element. We're then using the remove method of the element's classList object to remove an existing class name from the element.

Toggling Classes

To toggle a class on an element (i.e. add it if it doesn't exist, or remove it if it does), we can use the toggle method of the classList object. For example:

const element = document.querySelector('.my-element');
element.classList.toggle('active');

In this example, we're using the querySelector method to select an element with the class name my-element. We're then using the toggle method of the element's classList object to add or remove the active class name from the element, depending on whether it already exists.

Conclusion

The element.className property in JavaScript is a useful tool for working with the class attribute of HTML elements. With this property, we can get or set the class names of an element, as well as add, remove, and toggle individual classes with the element.classList property. By understanding these tools, we can create more dynamic and responsive web applications with JavaScript.