使用HTML5里的classList操作CSS类


Posted in HTML / CSS onJune 28, 2016

在JavaScript和JavaScript工具库里征战多年,我经常有这样的遐想:什么时候现代浏览器里能提供一些辅助方法和类库,替代那些JavaScript工具库,比如jQuery,让我们用浏览器原生的方法替代它们。我知道浏览器必定会向这个方向改进,但这个进化过程不会很迅速,而且各种浏览器需要共同做这样的革新,火狐浏览器、谷歌浏览器、特别是IE,只有当这些主流浏览器都具备了这样的功能,我们的愿望才算真正的实现。好消息是,其中有一个这样的功能已经被加入到了HTML5 API里:classList

在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

Element.classList

这个classList对象里有很多有用的方法:

XML/HTML Code复制内容到剪贴板
  1. {   
  2.  length: {number}, /* # of class on this element */   
  3.  add: function() { [native code] },   
  4.  contains: function() { [native code] },   
  5.  item: function() { [native code] }, /* by index */   
  6.  remove: function() { [native code] },   
  7.  toggle: function() { [native code] }   
  8. }   
  9.   

正如你上面看到的,Element.classList类很小,但里面的每个方法都很有用。

新增CSS类

使用add方法,你可以往页面元素是新增一个或多个css类:

myDiv.classList.add('myCssClass');

删除一个CSS类

使用remove方法,你可以删除单个CSS类:

myDiv.classList.remove('myCssClass');

你可以在这个方法里一次传入多个类名,用空格分开,但执行的结果很有可能不是你预期的。

反转CSS类的有无

myDiv.classList.toggle('myCssClass'); //现在是增加
myDiv.classList.toggle('myCssClass'); //现在是删除

这个方法的作用就是,当myDiv元素上没有这个CSS类时,它就新增这个CSS类;如果myDiv元素已经有了这个CSS类,它就是删除它。就是反转操作。

检查是否含有某个CSS类

myDiv.classList.contains('myCssClass'); //returns true or false

目前所有的现代浏览器(火狐浏览器,谷歌浏览器等)都支持这个classList类,所以,相信新型的javaScript类库里都会使用classList类来操作页面CSS类,而不需像以前一样去分析元素节点的class属性!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 #HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 #HTML / CSS
You might like
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
Yii配置文件用法详解
2014/12/04 PHP
Laravel实现表单提交
2017/05/07 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
js实现录音上传功能
2019/11/22 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python drf各类组件的用法和作用
2021/01/12 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
家长对孩子的感言
2014/03/10 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2019入党申请书格式
2019/06/25 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS