使用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垂直手风琴菜单
Jun 28 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python Requests安装与简单运用
2016/04/07 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
python中怎么表示空值
2020/06/19 Python
Python 解析xml文件的示例
2020/09/29 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
学习党课思想汇报
2013/12/29 职场文书
单位介绍信格式
2015/01/31 职场文书
大雁塔导游词
2015/02/04 职场文书
运动会跳远广播稿
2015/08/19 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
java多态注意项小结
2021/10/16 Java/Android
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL