使用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属性!
使用HTML5里的classList操作CSS类的更多相关文章
- 第88天:HTML5中使用classList操作css类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...
- JQuery:JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- CSS类的操作
CSS类的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- jquery操作html元素之( 获取并设置 CSS 类)
jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...
- js动态给当前点击元素添加css类
1.页面:
- 深入理解脚本化CSS系列第三篇——脚本化CSS类
前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...
- 使用 JS 来动态操作 css ,你知道几种方法?
JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.D ...
- 使用JS动态操作css的集中方法
内联样式 在咱们深入一些复杂的知识之前,先回来顾一下一些基础知识.例如,咱们可以通过修改它的.style属性来编辑给定的HTMLElement的内联样式. const el = document.cr ...
- 第二十五篇 jQuery 学习7 获取并设置 CSS 类
jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...
随机推荐
- js中substr,substring,indexOf,lastIndexOf的用法小结
第一组:str.substr(start,length) 和 str.substring(start,end) 定义: str.substr(start,length) substr(start,le ...
- bzoj1001最小割
听说最大流过不去??? dinic果然神了,1000,000的点都能过(主要是比较稀疏) #include <cstdio> #define INF 9223372036854775807 ...
- PyCharm 代码完成/代码提示
因为python是动态语言,所以在有些情况ide会无法有效代码提示,见下: import sqlite3 conn = sqlite3.connect('d:/xxx.db') conn. #这里按 ...
- 多线程、委托、Invoke解决winform界面卡死的问题,并带开关
一.知识点介绍 1,更新控件的内容,应该调用控件的Invoke方法. Invoke指: 在拥有控件的基础窗口句柄的线程上,用指定的参数列表执行指定委托.该方法接收一个委托类型和委托的参数,因此需要定义 ...
- Ubuntu下Android Studio环境搭建
1.JDK安装 a.准备 由于AS(Android Studio)不支持openjdk,需要另行下载oracle jdk,同时官网指出对于64位linux系统,为了能在其上运行32位程序,需要安装一些 ...
- (原).NET程序加入多语言包解决方案工具,超级棒
Multi-Language Add-In Version 5.04.0088 for Visual Studio 2013 安装包:http://www.jollans.com/SetupMulti ...
- JS的面向对象编程一:封装
Javascript是一种基于对象的语言,但它又没有class.这在很长的一段时间里,对JS的面向对象编程的概念很模糊,在编程的时候时有用到,但要说个所以然,却说不出来,所以看了些书,又在网上查了些资 ...
- c#动态编译并动态生成dll
/// <summary> /// 动态编译并执行代码 /// </summary> /// <param name="code">代码< ...
- poj2718-Smallest Difference(枚举全排列)
一,题意: 给出最多10个数字,将它们划分为两个整数,求差值最小的值(除非只有一位数,否则不允许出现先导0) 很显然如果总共有n个数,必然有一个整数长n/2,另一个长n-n/2.二,思路: 利用nex ...
- You are attempting to run the 32-bit installer on a 64-bit version of Window
您正试图在64位版本的窗口中运行32位安装程序. 系统有32位操作系统和64位操作系统的分别,相同的软件的安装也需要区分操作操作系统的位数. 解决办法:查看自己系统类型,根据类型下载安装相应位数的软件 ...