Class handling with classList
classList returns a token list of the class attribute for a given element, with which one can do the below easily!
add a class to an element's list of classes
remove a class from an element's list of classes
toggle the existence of a class in an element's list of classes
check if an element's list of classes contains a specific class
// p is an object reference to a <p> element with class="foo bar". p.classList.remove("foo"); p.classList.add("cat dog"); // if visible is set remove it, otherwise add it. p.classList.toggle("visible"); // Will return true. console.log(div.classList.contains("foo"));
To check if the browser supports this API :
if ( !("classList" in document.documentElement) ) {..}
or
if (!!document.createElement('p').classList) { // native classList support };
One can also check if an element has a class or not using p.classList.length
Hope this is useful, it's been really useful for me so far!
Edit 0:
In jQuery : $().toggleClass("active", true)
While the ClassList per se lacks that facility, one can do the same like :
elem.classList[boolean ? "add" : "remove"] ("active")
Recent blog posts
- watir-webdriver web inspector
- gem list to gemfile
- Packing ruby2.0 on debian.
- Made it into The Guinness Book!
- to_h in ruby 2.0
- Filter elements by pattern jQuery.
- Better HTML password fields for mobile ?
- Grayscale image when user offline
- nth-child CSS pseudo-class Christmas colors
- EventEmitter in nodejs