使用HTML5中的classList操作CSS类
2016-04-22 20:50
555 查看
在HTML5 API 里,页面DOM中的每个节点上都有一个classList对象,web developer 可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,还可以判断某个节点是否被赋予了某个CSS类。
classList对象中的方法如下:
一、新增CSS类
使用add方法,可以向页面元素中新增一个或多个css类:
使用remove方法,可以删除单个css类:
就是说,当myDiv元素上没有这个css类的时候,它就新增这个css类,如果myDiv元素已经有了这个css类,它就删除这个css类。
四、检查是否含有某个css类:
目前,所有的现代浏览器都支持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] } }
一、新增CSS类
使用add方法,可以向页面元素中新增一个或多个css类:
<span style="white-space:pre"> </span>myDiv.classList.add('myCssClass');二、删除一个CSS类
使用remove方法,可以删除单个css类:
<span style="white-space:pre"> </span>myDiv.classList.remove('myCssClass');三、反转CSS类的有无:
<span style="white-space:pre"> </span>myDiv.classList.toggle('myCssClass'); //现在是增加<span style="white-space:pre"> </span> <span style="white-space:pre"> </span>myDiv.classList.toggle('myCssClass'); //现在是删除
就是说,当myDiv元素上没有这个css类的时候,它就新增这个css类,如果myDiv元素已经有了这个css类,它就删除这个css类。
四、检查是否含有某个css类:
<span style="white-space:pre"> </span>myDiv.classList.contains('myCssClass'); //returns true or false
目前,所有的现代浏览器都支持classList,可以方便地使用它。
相关文章推荐
- h5上传图片及预览
- webkit移动开发笔记:html5中video与audio标签之无法自动播放的audio元素
- 解决C:\fakepath路径加密问题,图片上传之前的预览功能的实现,html5 实现图片预览功能
- HTML5 图形组件-拓扑图等
- 浅谈:html5和html的区别
- 最全html5 meta设置详解 (转)
- H5在线编辑器优化总结
- 提升html5的性能体验系列之四使用原生ui
- 提升html5的性能体验系列之三流畅下拉刷新
- 提升html5的性能体验系列之二列表流畅滑动
- 提升html5的性能体验系列之一避免切页白屏
- h5屏蔽页面中数字当手机号的问题
- 【F2E】viewport 模板(通用 HTML5 初始 *.html 文件)
- HTML5之Canvas绘图(二) ——应用篇之七巧板
- 移动前端头部标签(HTML5 head meta)
- HTML5之Canvas绘图(一) ——基础篇
- 关于H5 audio标签的个人使用心得
- HTML5 获取用户经纬度及距离计算公式
- h5入门篇之标签元素
- 1-HTML5初识