HTML5中classList的介绍
说到现在的网页浏览器，有不少都已经支持HTML5了！这个功能太好用了，就像我们前端人员的小帮手。比如说classList这个东西，虽然听着普通，但是只要用对了地方，就能随意给页面元素加、减或者改CSS属性的级别，还能看到网页每个部分使用了哪些CSS特性。这样一来，就算页面风格再多变也不用担心~
Element.classList对象
看过那个HTML5 API里面的超厉害的玩意儿没？比如说那个”classList”？用这个能让你瞬间搞定CSS类，轻松搞好网站元素效果！看着不大，但就是我们前端开发的救星！
{
length: {number}, /* # of class on this element */
add: function() { [native code] },
contains: function() { [native code] },
item: function() { [native code] }, /* by index */
remove: function() { [native code] },
toggle: function() { [native code] }
}
新增CSS类
给网页标签来点儿CSS类，这样就能随你心意换样式了，各种各样的风格都行。
删除CSS类
myp.classList.add('myCssClass');
记好了，只要会用classList中的remove功能，瞬间就能让网页元素变样儿！无论要换外观还是调整布局，网页看上去清爽许多.日后维护轻松许多！
反转CSS类的有无
告诉你个好消息，现在Surfer Friendly classList这个东西不仅能移除元素，还能添加新元素！这样网页就更好玩儿了！
检查是否含有某个CSS类
myp.classList.remove('myCssClass');
别担心交互的问题了，你只需要检查一下页面有没有可用的 CSS 类名，然后就可以顺利搞定！你还可以通过查看是否存在相应类名来确保后续操作无误~
classList在现代浏览器中的支持
快看浏览器里那个叫classList的新增功能，Chrome, Firefox和Edge都能使用。会用不？这个功能是网页设计排版神器，让前端开发变得超简单！
myp.classList.toggle('myCssClass'); //现在是增加
myp.classList.toggle('myCssClass'); //现在是删除
结语
我说的是HTML 5里面的classlist功能，它就像个神奇化妆盒，能随意给网页元素穿上漂亮衣服！用起来超顺手的，想换啥样式都行，根本不用那些繁杂的工具了。而且，现在的浏览器越来越牛，以后这classlist更可能成我们手里的必杀技。
评论0