In the past, we needed to use some methods of JS or jQuery, Hasclass, AddClass, and RemoveClass. Add or delete some classes to a class change to a certain style of change on the Class attribute of an element, but it is still slightly troublesome.
H5's new ClassList allows us to operate the category name of our more convenient elements.
NoticeClassList compatibility is somewhat poor, not compatible with IE browser below IE10.
Exemplary example
<! Doctype html> <html> <gead> <meta charset = UTF-8> <Title> ClassList </Title> <STYLE>. Mthstyle {width: 300px; 50px; background-back: D; D;: White ; font-size: 25px;} </style> </head> <body> <p> Click the button to add the MyStyle class to the DIV element. </p> <Button Onclick = MyFunction ()> Click me </Button> <div ID = MyDiv> I am a DIV element. </div> <script> Function myfunction () {document.GetelementByid (mydiv) .classList.add (mystyle);} </script> </body> </html> New categoryUsing the ADD method, you can add one or more categories to the page element:
document.GetelementByid (mydiv) .classList.add (mystyle);Delete a class
With the Remove method, you can delete a single CSS class:
document.GetelementByid (mydiv) .classList.remove (mystyle);Switch category name in elements
Switch category names in elements. Use the Toggle method, grammar: Toggle (Class, TRUE | FALSE)
The first parameter is the class name to be removed in the element and returns false.
If the name does not exist, the class name will be added to the element and returns True.
The second is optional parameters. Set the Boolean value to set whether the element is mandatory to add or remove the class, regardless of whether such names exist. For example:
Remove one
document.GetelementByid (mydiv) .classlist.toggle (Classtoremove, FALSE);
Add one
document.GetelementByid (mydiv) .classList.toggle (CLASSTOADD, TRUE);
Note: Internet Explorer or Opera 12 and its earlier versions do not support the second parameter
Check whether it contains a certain classUse the Contains method to determine whether a class exists and return to Boolean value.
// Return true or false document.getElementByid (mydiv) .classList.contains (mydiv);
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.