HTML5 classList API

Když jsem se vrhl do světa JavaScriptu a knihoven JavaScriptu, často mě napadlo:Kdy dodavatelé prohlížečů uvidí pomocné metody/knihovny vytvořené sadami nástrojů JavaScript a implementují tyto funkce nativně v prohlížeči? Uvědomuji si, že standardy jsou důležité a prodejci prohlížečů si nemohou dovolit tyto implementace podvrhnout, ale věřím, že by mohly být...urychleny. Dobrou zprávou je, že jedna z těchto funkcí byla přidána do HTML5 API; classList.

Objekt classList, přidaný do všech uzlů v rámci DOM, poskytuje vývojářům metody, pomocí kterých lze přidávat, odebírat a přepínat třídy CSS na uzlu. classList také umožňuje vývojářům zkontrolovat, zda byla danému uzlu přiřazena třída CSS.

Element.classList

classList objekt obsahuje řadu užitečných metod:

{
	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, jak můžete vidět, je malá, ale užitečná sbírka metod.

Přidání třídy CSS

Metoda add vám umožňuje přidat ještě jednu třídu oddělenou mezerou:

myDiv.classList.add('myCssClass');

Odebrání třídy CSS

Metoda add vám umožňuje odebrat jednu třídu:

myDiv.classList.remove('myCssClass');

Můžete oddělit více tříd prostorem, ale výsledek nemusí být neuvěřitelně spolehlivý.

Přepínání třídy CSS

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

Poznámka:Pokud se zavolá toggle a prvek nemá zadanou třídu CSS, třída se přidá.

Obsahuje kontrolu třídy CSS

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

ClassList API je nyní podporováno všemi moderními prohlížeči, takže hledejte JavaScriptové knihovny, které obsahují kontroly classList namísto analýzy atributu class prvku!