使用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实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
php中的登陆login实例代码
2016/06/20 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
Python迭代用法实例教程
2014/09/08 Python
python之wxPython应用实例
2014/09/28 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python解析微信dat文件的方法
2020/11/30 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
小学毕业家长寄语
2014/01/19 职场文书
婚礼主持词
2014/03/13 职场文书
海上钢琴师观后感
2015/06/03 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
dubbo服务整合zipkin详解
2021/07/26 Java/Android
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技