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!