Detailed introduction to using classList in HTML5 to operate CSS classes

This article mainly introduces in detail how to use classList in HTML5 to operate CSS classes. Interested friends can refer to it.

Having been working on JavaScript and JavaScript tool libraries for many years, I often have this daydream: when will modern browsers be able to provide some auxiliary methods and class libraries? Instead of those JavaScript libraries, like jQuery, let's replace them with browser-native methods. I know that browsers will definitely improve in this direction, but this evolution process will not be very fast, and various browsers need to make such innovations together. Firefox, Google Chrome, and especially IE, only when these mainstream browsers Only with such functions can our wishes be truly realized. The good news is that one such feature has been added to the HTML5 API: classList.

In the HTML5 API, each node in the page DOM has a classList object. Programmers can use the methods inside to add, delete, and modify CSS classes on the node. Using classList, programmers can also use it to determine whether a certain node is assigned a certain CSS class.

Element.classList

There are many useful methods in this classList object:

{   
 length: {number}, /* # of class on this element */   
 add: function() { [native code] },   
 contains: function() { [native code] },   
 item: function() { [native code] }, /* by index */   
 remove: function() { [native code] },   
 toggle: function() { [native code] }   
}

As you can see above, the Element.classList class is very Small, but every method in it is useful.

Add CSS classes

Using the add method, you can add one or more CSS classes to page elements:

myp.classList.add('myCssClass');

Delete a CSS class

Using the remove method, you can delete a single CSS class:

myp.classList.remove('myCssClass');

You can pass in multiple class names at once in this method, using separated by spaces, but the result of execution may not be what you expect.

Invert the presence or absence of the CSS class

myp.classList.toggle('myCssClass'); //现在是增加
myp.classList.toggle('myCssClass'); //现在是删除

The function of this method is that when there is no such CSS class on the myp element, it will add this new one CSS class; if the myp element already has this CSS class, it removes it. It's a reversal operation.

Check whether it contains a certain CSS class

myp.classList.contains('myCssClass'); //returns true or false

Currently all modern browsers (Firefox, Google Chrome, etc.) support this classList class, so, I believe that new JavaScript class libraries will use the classList class to operate the page CSS class, without having to analyze the class attribute of the element node as before!

The above is the detailed content of Detailed introduction to using classList in HTML5 to operate CSS classes. For more information, please follow other related articles on the PHP Chinese website!