HTML5 classList API

佚名 6年前 (2019-04-10) 随笔 835人围观抢沙发百度已收录

Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: When are browser vendors going to see the helper methods/libraries created by the JavaScript toolkits and implement these functionalities natively within the browser? I realize that standards are important and browser vendors can't afford to half-ass these implementations but I do believe they could be...expedited. The good news is that one of these functionalities has been add to the HTML5 API; classList.

The classList object, added to all nodes within the DOM, provides developers methods by which to add, remove, and toggle CSS classes on a node. classList also allows developers to check if a CSS class has been assigned to a given node.

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

Element.classList

The classList object contains a number of helpful methods:

{
	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] }
}

Element.classList, as you can see, is a small but useful collection of methods.

Adding a CSS Class

The add method allows you to add one more multiple space-separated classes:

myDiv.classList.add('myCssClass');

Removing a CSS Class

The add method allows you to remove a single class:

myDiv.classList.remove('myCssClass');

You could separate multiple classes by space but the result may not be incredibly reliable.

Toggling a CSS Class

myDiv.classList.toggle('myCssClass'); //now it's added myDiv.classList.toggle('myCssClass'); //now it's removed

Note: If toggle is called and the element does not have the provided CSS class, the class is added.

Contains CSS Class Check

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

Some CSS properties may need to be vendor-prefixed.

The classList API is now supported by all modern browsers, so look for the JavaScript libraries to include classList checks instead of parsing an element's class attribute!