HTML5 new features: classlist attributes of elements and their applications

Before HTML5 the new classlist, the class of the operation element was classname this attribute, and if you want to encapsulate hasclass, removeclass, addclass for jquery, Toggleclass as elegant operation calssname, in the past we have to classname package processing, as follows, The following code you may not be able to understand the running process, but should be able to understand the functional section, these sections of the function is taken from a set of videos I recorded, Explain part of the DOM framework package

gquery.prototype.hasclass = function  (obj, cname)  {    //  <div class= "abc" > <div class= "hello abc def" ></div> <div  class= "hello def abc" ></div>    return obj.classname.match ( New regexp (' (\\s|^) '  + cName +  ' (\\s|$) ');} gquery.prototype.addclass = function  (cName)  {    for  (var i  = 0; i < this.elements.length; i++)  {         if  (!this.hasclass (this.elements[i], cname))  {             // hello abc   // abc             this.elements[i].className +=  " "  + cname;        &nBsp;   this.elements[i].classname = this.trim (this.elements[i].classname);         }    }    return this;} gquery.prototype.removeclass = function  (cName)  {    for  (var  i = 0; i < this.elements.length; i++)  {         if  (this.hasclass (this.elements[i], cname))  {             var re = new regexp (' (\\s|^) '  +  cname +  ' (\\s|$) ');             This.elements[i].classname = this.elements[i].classname.replace (re,  " ");             this.elements[i].classname = this.trim ( this.elements[i].classname);          }    }    return this;} gquery.prototype.toggleclass = function  (cName)  {    for  (var  i = 0; i < this.elements.length; i++)  {         if  (this.hasclass (this.elements[i], cname))  {             this.removeclass (cName);         } else {             This.addclass (cName);        }    }     return this;}

here, I also wrote a separate function to delete a class:

<div class= "box1 box2 box3" >this is a test string</div>     <input type= "button"  value= "remove a class" >    <script >        var odiv = document.queryselector ("div"),             classNames =  ',             obtn = document.queryselector ("input");         obtn.onclick = function () {             classnames = odiv.classname.split (/\s+/);             var pos = -1, i,  Len;            for ( i = 0,  Len = classnames.leNgth; i < len; i++ )  {                 if ( classNames[i] ==  ' Box2 '  )  {                      pos = i;                     break;                 }            }             classnames.splice ( i, 1 );             odiv.classname = classnames.join (   " "  );        }    </script>

The idea is very simple, get all the classes in the Div element, use split to cut by the space, you will get an array of [box1,box2,box3], and then traverse the judgment, whether there is box2 this class?

Once found, the index of the current array is recorded, and then splice the class from the array to get [box1,box3] and then the array of each item is concatenated with a space in the join function, and then assign the value

To the classname of the Element.

And in html5, each element has classlist this property, classlist is an array of classes, provides 4 ways to manipulate the class: add,remove,toggle,contains,

See these English words, you already know what the meaning of it, especially for the use of jquery friends

Add (class), Remove (delete class), toggle (toggle Class) contains (determines if a class is Included)

<div id= "box"  class= "box1 box2 box3" >this is a test string</ Div>    <input type= "button"  value= "add class"  id= "btn-add" >     <input type= "button"  value= "remove class"  id= "btn-remove" >     <input type= "button"  value= "toggle class"  id= "btn-toggle" >    < script>        var g = function  (id)  {  return document.queryselector (id); }        var  Obtnadd = g (' #btn-add '),             Obtnremove = g (' #btn-remove '),             obtntoggle = g (' #btn-toggle '),             obox = g ('#box ');         obtnadd.onclick = function () {             obox.classlist.add (  ' box4 '  );         }        obtnremove.onclick  = function () {            if (  OBox.classList.contains (' box1 ')  )  {                 obox.classlist.remove (  ' Box1 '  );             }        }         obtntoggle.onclick = function () {             obox.classlist.toggle (  ' box4 '  );         }    </script> 

This article is from the "ghostwu" blog, make sure to keep this source http://ghostwu.blog.51cto.com/11192807/1958991

HTML5 new features: classlist attributes of elements and their applications