The classlist attribute of HTML5 actual combat and analysis

Classlist property What exactly is doing, we first leave classlist regardless. Let's consider the question of how do we delete one of the class names in an element that has more than one class name? Dream Dragon rivalry brains son finally thought of a method of realization. The class name in the class name Li, Meng, and long, three class names will be Meng deleted. The code is as follows

HTML code

1. View Source print? 1. <div class="li meng long">梦龙小站</div>

JavaScript code

View Source print? 01. //获取要删除类名meng的div  02. var  div = document.getElementsByTagName( "div" )[0];  03.  04. //获取类名字符串并拆分成数组  05. var  allClassName = div.className.split( " " );  06.  07. //找到要删除的类名  08. var  i, len,   09. pos = -1;  10.  11. for (i=0, len = allClassName.length; i < len; i++){  12. if (allClassName[i] ==  "meng" ){  13. pos = i;  14. break ;  15. }  16. }  17.  18. //删除类名  19. allClassName.splice(pos, 1);  20.  21. alert(allClassName)  //li,long  22.  23. //将其余的类名拼成字符串并重新添加到元素的类名中  24. div.className = allClassName.join( " " ); 

Preview effect

In order to remove the "Meng" from the element class name, the above code is required. Replace the class name with a similar algorithm and confirm that the class name is included in the element. If adding a class name can be done by stitching a string, but it must be detected that the same class name is not added multiple times, many JavaScript libraries implement this method and simplify the operation. The Delete class name is the first to get the existing class name, find the location where you want to delete the class name, and then delete it.

As can be seen from the above method, to implement a simple delete function to write several lines of code, if you do not want to write several lines of code, you have to introduce a library of the method in the library. With HTML5 you don't have to be so troublesome, we can use the Classlist property in HTML5 to complete these steps. This classlist property is an instance of the new collection type Domtokenlist. Similar to other DOM collections. Domtokenlist has a length property that represents how many elements it contains, and you can use the square bracket syntax to get each element you can use the item () method. In addition, here are the methods defined for this new type.

1. Remove (value)

The Remove (value) method means that the given string is removed from the list. The small examples are as follows:

HTML code

View Source print? 1. < div  class = "li meng long" >梦龙小站</ div >

JavaScript code

View Source print? 1. //获取要删除类名meng的div  2. var  div = document.getElementsByTagName( "div" )[0];  3.  4. alert(div.classList)   //li meng long  5.  6. div.classList.remove( "meng" )   7.  8. alert( "div.className: "  + div.className)   //div.className: li long 

Preview effect

2, contains (value)

The contains (value) method indicates whether a given value exists in the list, returns "true" if it exists, or returns a small example of "false" as follows:

HTML code

1. View Source print? 1. <div class="li meng long">梦龙小站</div>

JavaScript code

View Source print? 1. //获取要删除类名meng的div  2. var  div = document.getElementsByTagName( "div" )[0];  3.  4. alert(div.classList.contains( "meng" ))  //true  5.  6. alert(div.classList.contains( "menglong" ))  //false

3. Add (value)

The Add (value) method indicates that a string in the list is added to the list. If it already exists, it is not added. The small examples are as follows:

HTML code

1. < div  class = "li meng long" >梦龙小站</ div >

JavaScript code

View Source print? 1. //添加类名 menglong  2.  3. //获取要删除类名meng的div  4. var  div = document.getElementsByTagName( "div" )[0];  5.  6. div.classList.add( "menglong" );  7.  8. alert( "div.className: "  + div.className)   //div.className: li meng long menglong

Preview effect

4, toggle (value)

The Toggle (value) method, if a given value already exists in the list, deletes it, or adds it if there is no given value in the list. The small examples are as follows:

HTML code

< div  class = "li meng long" >梦龙小站</ div >  < div  class = "li long" >梦龙小站</ div >

JavaScript code

//切换类名 meng    //获取要删除类名li的div  var  div = document.getElementsByTagName( "div" );  var  i, len;    for (i=0, len = div.length; i< len; i++){  div[i].classList.toggle( "meng" );  }    alert( "div[0].className: "  + div[0].className)   //div[0].className: li long  alert( "div[1].className: "  + div[1].className)   //div[1].className: li meng long 

Preview effect

The

Small examples of classlist have been presented for everyone, and these small methods can be presented and explained clearly in small examples. With classlist, unless you need to remove all of the class names, or completely rewrite the class attribute of the element, you will not be using the classname attribute, and there are many practical methods attached. Browsers that support Classlist properties have Firefox 3.6+ and Chrome.