使用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‘);
时间: 2024-08-10 20:06:21

使用HTML5里的classList操作CSS类的相关文章

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

在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 一.Element.classList 这个classList对象里有很多有用的方法: 1 { 2 length: {number}, /* # of class on this element */ 3 add: function() { [native code] }, 4

js操作css类

经常会使用js动态设置css类,两种方法. 1.className className是包含所有类的字符串,所以添加删除类就像操作字符串一样就好. 添加类的话比较简单,直接 obj.className += ' active'; 记得加空格. 移除类,需要使用字符串replace函数. obj.className.replace(' active', ''); 如果直接这样写,你会发现没用!!!! 后来才发现,replace不改变原值,而返回值是替换后的值,所以需要这样: obj.classNa

JQuery:JQuery操作CSS类

JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 1.jQuery addClass() 方法实例1:下面的例子

利用html5中的classList.toggle实现给单击过得元素添加动态class类,并且每次只能选中一个

1.页面: 2.html代码: <div class="project-all"> <template v-for='(index,project) in projectData'> <div class="project" v-on:click='projectSelectFun($event,index)'>{{project.projectName}}</div> </template> <di

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

jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 实例样式表 下面的样式表将用于本页的所有例子: .important { font-weight:bold; font-size:xx-large; } .blue { color:

CSS类的操作

CSS类的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .b1 { width: 100px; height: 100px; background-color: skyblue; } .b2 { /* width: 200px; */ he

jQuery - 获取并设置 CSS 类:对 CSS 元素进行操作

jQuery - 获取并设置 CSS 类 通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换 CSS 类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 实例样式表 下面的样式表将用于本页的所有例子: .import

JavaScript 操作CSS

JavaScript 操作CSS 关于CSS的介绍不是本文的内容范围,本文主要介绍如何使用JavaScript操作CSS. 1. 使用JavaScript操作Inline Styles 所有的文档元素都有style属性,我们可以通过直接操作style属性来修改相关元素的样式. 需要注意的是style属性的值并不是一个string对象,而是一个CSSStyleDeclaration对象. 我们可以通过如下方式设置style属性的值. e.style.fontSize = "24pt";

深入理解脚本化CSS系列第三篇——脚本化CSS类

前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接改变其行间样式 <div id="test" style="height:100px;width:100px;background-color:blue;"></div> <script> test.onclick = functio