使用HTML5里的classList操作CSS类
来源:互联网 发布:php采集网页内容 编辑:程序博客网 时间:2024/06/14 08:07
在HTML5 API里,页面DOM里的每个节点上都有一个classList
对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList
,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
Element.classList
这个classList
对象里有很多有用的方法:
{ 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] }}
正如你上面看到的,Element.classList
类很小,但里面的每个方法都很有用。
新增一个css类:使用add方法。
myDiv.classList.add('myCssClass');
删除一个css类:使用remove方法。
myDiv.classList.remove('myCssClass');
你可以在这个方法里一次传入多个类名,用空格分开,但执行的结果很有可能不是你预期的。
反转css类的有无:使用toggle方法。
myDiv.classList.toggle('myCssClass'); //现在是增加myDiv.classList.toggle('myCssClass'); //现在是删除
这个方法的作用就是,当myDiv元素上没有这个CSS类时,它就新增这个CSS类;如果myDiv元素已经有了这个CSS类,它就是删除它。就是反转操作。
检查是否含有某个CSS类:
myDiv.classList.contains('myCssClass'); //returns true or false
0 0
- 使用HTML5里的classList操作CSS类
- 使用HTML5里的classList操作CSS类
- 使用HTML5里的classList操作CSS类的详细介绍
- 使用HTML5中的classList操作CSS类
- HTML5 DOM元素类名相关操作API classList简介
- HTML5 DOM元素类名相关操作API classList简介
- HTML5基础加强css样式篇(DOM的属性操作(对class属性值的操作 setAttribute,removeAttribute,classlist:remove,add,toggle))(七)
- HTML5中与类相关的扩充classList
- 利用HTML5的classList API优化对样式名className的操作
- HTML5 classList API接口
- HTML5 classList 小结
- html5笔记之classList
- HTML5新特性-元素的classList属性与应用
- HTML5新特性-元素的classList属性与应用
- classList详解,让你的js方便地操作DOM类
- 好用html5-api:classList
- 山寨HTML5API classList类
- classList
- maven下载慢解决方法(使用国内镜像)
- js动态给当前点击元素添加css类
- 数据结构与算法---向量使用
- UESTC 1059 秋实大哥与小朋友(线段树+离散化)
- 二分法典型应用(三)最大化平均值
- 使用HTML5里的classList操作CSS类
- Coding Contest-青岛区域赛网络流
- AOP面向方面编程
- vue实例属性(vm.$els)
- 华为2017实习生面试
- HDU2767 Proving Equivalences
- 初学Linux系统 心得体会
- java集合类
- linux常用指令之一:grep与正则使用样例