使用HTML5里的classList操作CSS类

在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

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

转载于:https://www.cnblogs.com/yingzi1028/p/5563689.html

使用HTML5里的classList操作CSS类相关推荐

第88天：HTML5中使用classList操作css类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...
使用HTML5的classList属性操作CSS类
前言以前我们有需要用js或jquery的一些方法hasClass.addClass.removeClass,在一个元素的class属性上添加或者删除某几个类,达到某种样式变化的需求,但还是稍微麻烦了 ...
html5 list css,使用HTML5的classList属性操做CSS类
前言之前咱们有须要用js或jquery的一些方法hasClass.addClass.removeClass,在一个元素的class属性上添加或者删除某几个类,达到某种样式变化的需求,但仍是稍微麻烦了 ...
HTML5 classList 操作类名
使用HTML5 classList在JS中操作类名文章目录使用HTML5 classList在JS中操作类名前言一.classList.add() 二.classList.remove() 三 ...
jQuery 样式操作||操作 css 方法/设置类样式方法
操作 css 方法 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
Mr.J-- jQuery学习笔记(七)--CSS类操作文本值操作
不了解属性以及属性操作的同学可以看我之前的博客:Mr.J-- jQuery学习笔记(五)--属性及属性节点下面demo 中btn用到的角标,之前写验证码动态强度测试时也用过同样方法:Mr.J--密码 ...
HTML5期末大作业：美食网页制作——餐饮料里(12页) HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:美食网页制作--餐饮料里(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
HTML5期末大作业：游戏类网站设计——王者荣耀(60页) HTML+CSS+JavaScript
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
php+jq+添加css,jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
js动态给当前点击元素添加css类
1.页面: 2.html代码: <div class="project-all"><template v-for='(index,project) in proj ...

使用HTML5里的classList操作CSS类

使用HTML5里的classList操作CSS类相关推荐

最新文章

热门文章