html中css中class详细介绍,使用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属性！

第88天：HTML5中使用classList操作css类

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

JQuery：JQuery操作CSS类

JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

CSS类的操作

CSS类的操作

jquery操作html元素之( 获取并设置 CSS 类)

jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...

深入理解脚本化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完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

随机推荐

匿名访问ReportService报表服务器(一)

我的数据库版本是sql server 2008 r2,系统环境是windows server2008. 对于sql server 2008 r2上报rs报表的匿名访问问题,我这边尝试过两个可行方案: ...

shell之函数

function 所有函数在使用前必须定义.这意味着必须将函数放在脚本开始部分,直至shell解释器首次发现它时,才可以使用.调用函数仅使用其函数名即可.可以将函数看作是脚本中的一段代码,但是有一个主 ...

Excel中 设置使得每行的颜色不一样

在编写测试案例的时候,众多的excel行看的眼睛花花的,这里给出一个小技巧,设置Excel的每行显示的颜色不一样,最终的效果如下:    具体操作:     1. Ctrl+A全选所有表格区域 ...

229. Majority Element II My Submissions Question

Total Accepted: 23103 Total Submissions: 91679 Difficulty: Medium Given an integer array of size n, ...

Java [leetcode 15] 3Sum

问题描述: Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find ...

c# 可变字符串 StringBuilder

普通的string不可变,除非用+ 但是+两个字符串后 会生成一个新的string实例.会在内存中创建新的字符串对象.如果重复的对字符串修改,将极大的增加内存开销.c#提供了个可变的字符串序列Stri ...

FTP连接超时

今天程序在连接FTP服务器,突然无法连接,用Windows 的 Explorer能正常连接,但用 WebRequest.WebResponse连接时,总是抛出连接超时异常. 后查找相关资料,原因是:程 ...

o.s.b.d.LoggingFailureAnalysisReporter

1.错误信息 *************************** APPLICATION FAILED TO START *************************** Descripti ...

python selenium-webdriver 元素定位(三)

上两篇的博文中介绍了python selenium的环境搭建和编写的第一个自动化测试脚本,从第二篇的例子中看出来再做UI级别的自动化测试的时候,有一个至关重要的因素,那就是元素的定位,只有从页面上找到 ...

C#窗口禁止移动的方法

1,窗口属性中有locked属性,设置为true. (在自己进行编码的时候并没能找到这个属性,貌似只能在窗口设计时进行设置,故此方法无可控性) 2,窗口属性中有FormBorderStyle属性,设置 ...