Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
using new html5 classlist api
12-20-2011, 07:21 AM (This post was last modified: 12-20-2011 07:26 PM by haider.ali.)
Post: #1
using new html5 classlist api
ClassList object is added to all nodes within the DOM, it provides methods like add, remove, and toggle CSS classes on a node and allows to check if a CSS class has been assigned to a given node.

Simple Example

<!DOCTYPE html>
    <title>Classlist property</title>
            function btn1func()
                var id = document.getElementById("div1");
            function btn2func()
            var id = document.getElementById("div1");


    <div id="div1">
        Some Text
    <input type ="submit" id ="btn1" onclick="btn1func()" value="red">
    <input type ="submit" id ="btn2" onclick="btn2func()" value="blue">    

Adding a CSS Class


Removing a CSS Class


Toggling a CSS Class

myDiv.classList.toggle('mycsclass'); //now it's added
myDiv.classList.toggle('mycsclass'); //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('mycsclass'); //returns true or false


Possibly Related Threads...
Thread: Author Replies Views: Last Post
  HTML5 Session History and Navigation API haider.ali 0 3,146 08-28-2011 11:57 AM
Last Post: haider.ali

User(s) browsing this thread: 1 Guest(s)