i




 
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

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Classlist property</title>
    
    <style>
    
    .classb
    {
        color:blue;
    }
    
    .classr
    {
        color:red;
    }    
    
    </style>
   &lt;script&gt;
    
            function btn1func()
            {
                var id = document.getElementById("div1");
                
                
                
                if(id.classList.contains('classb'))
                {
                    id.classList.remove('classb')
                }
                                
                id.classList.add('classr');
            }
            
            function btn2func()
            {
            var id = document.getElementById("div1");
            if(id.classList.contains('classr'))
                {
                    id.classList.remove('classr')
                }
                                
                id.classList.add('classb');
            }
            
            

    
    &lt;/script>
</head>
<body>
  

    
    
    
    <div id="div1">
        
        Some Text
        
    </div>
    
    <input type ="submit" id ="btn1" onclick="btn1func()" value="red">
    <input type ="submit" id ="btn2" onclick="btn2func()" value="blue">    
</body>
</html&gt;



Adding a CSS Class

myDiv.classList.add('mycsclass');


Removing a CSS Class

myDiv.classList.remove('mycsclass');




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


Quote


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



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