脚本化CSS类-HTML5 classList属性

  HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表。标识符class在JavaScript中是保留字,所以在JavaScript中可以用className。  

            //如下代码设置和清除元素的className属性来为元素添加或移除attention类
            function grabAttention(e){e.className="attention";}
            function releaseAttention(e){e.className="";}

  然而className属性是一个容易误解的名字:classNames可能更容易理解。就像getElementById()方法可以返回一个元素,getElementsByTagName(),getElementsByClassName(),getElementsByName()返回的是一个只读的类数组对象(NodeList)。

  上面的代码中假设className属性只指定零个或一个类名,这显然不能不满足实际开发过程中涉及多个类名的需要了。

  HTML5解决了这个问题,为每个元素定义了classList属性。该属性是DOMTokenList对象:一个只读的类数组对象。提到类数组,大家肯定会想到Array.prototype.XX.call(e.classList)来调用Array方法了。但是和数组元素相比,DOMTokenList定义的方法更加有实用。

    1.add() 给元素的class属性添加一个类名。

    2.remove() 从元素的class属性中清除一个类名。

  3.toggle() 表示如果元素不存在类名就添加,否则就删除它。非常实用的!!!类似于JQuery的toggleClass()方法。

  4.contains() 检测class属性中是否包含一个指定的类名。

  类似其他DOM集合类型,DOMTokenList对象"实时地"代表了元素类名的集合,而并非是在查询classList属性时的一个静态快照。同样,DOMTokenList对象也是双向的。所谓双向性即是,如果从元素的classList属性中获得了一个DOMTokenList对象,然后元素的className属性改变了,这些变化在标识列表中及时可见。同样,改变标识列表,在className属性中及时可见。也就是说 classList除了上面四个重要方法外,还有实时性,双向性的特点。 

  除了classList,还有前面讲过的dataset属性也是拥有实时性、双向性的哟。

  注意:queryElementsByTagName(),queryElementsByClassName(),queryElementsByName()返回的NodeList对象也是实时的,而querySelectorAll()返回的NodeList并不是实时的。

  源自《JavaScript权威指南》 16.5

时间: 2024-10-05 10:43:17

脚本化CSS类-HTML5 classList属性的相关文章

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

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

深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息,但是却无法使用javascript来直接操作伪元素,本文以一个需求解决为例,详细介绍脚本化伪元素的6种方法 需求说明 [1]为id=box的div元素添加content="前缀"的:before伪元素 [2]为已经添加:before伪元素的div元素删除伪元素  [注意]由于IE7-浏览

深入理解脚本化CSS系列第四篇——脚本化样式表

× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化样式表当然也是一种脚本化CSS的技术,虽然不经常使用,但有时却非常有用.下面将详细介绍脚本化样式表的内容 CSSStyleSheet CSSStyleSheet类型表示的是样式表.我们知道,引入CSS一共有3种方式,包括行间样式.内部样式和外部样式.其中,内部样式和外部样式分别通过<style>和

深入理解脚本化CSS系列第一篇——脚本化行内样式

× 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样式 基本用法 行间样式又叫内联样式,使用HTML的style属性进行设置 <div style="height: 40px;width: 40px;background-color: blue;"></div> element元素节点提供style属性,用来操作CS

脚本化CSS

box-sizing:标准css盒模型规定width和height样式属性给定内容区域的尺寸,并且不包含内边距和边框.可以称此盒模型为"内容盒模型".在老版IE里和新版的CSS中都有一些例外,在IE6之前和当IE6~8在"怪异模式"下显示一个页面时(页面中缺少<!DOCTYPE>或有一个不够严格的doctype时),width和height属性确是包含内边距和宽度的. 脚本化内联样式:style属性是一个CSSStyleDeclaration对象.如果一

JavaScript脚本化CSS样式表

在使用JavaScript脚本化操作CSS样式表的时候,必须要使用到两个对象: 1,元素对象:也就是<link>元素与<style>元素. 2,CSSStyleSheet对象:与当前文档关联的在一起的样式表,通过document.styleSheets获取,该对象是只读的类数组对象(由CSSStyleSheet对象组成的类数组). 注:可以通过在<link>与<style>元素中添加title属性,这样返回的CSSStyleSheet对象中的title属性可

深入理解脚本化CSS系列第五篇——动态样式

前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式 动态样式包括两种情况:一种是通过<link>元素插入外部样式表,另一种是通过<style>元素插入内部样式.下面将详细介绍这两种情况 外部样式 /*style.css里面的内容*/ .

脚本化CSS(一) - 之CSS概览

一.概览 CSS定义了属性以指定字体.颜色.外边距.边框.背景图片.文本对其方式.元素尺寸和元素位置. 1 font-weight:bold; 2 margin-left:10%; /*左边距是页面宽度的10%*/ 3 text-indent:.5in; /*1/2英寸缩进*/ 4 font-size:12pt; /*字体尺寸12pt*/ 样式的引用方法: 1.内联样式 2.用<style>和</style>标签把一个CSS样式表抱起来放在<head>标签里 3.保存在

浅谈脚本化css(三)之方块运动函数

我们可以写一个让小方块运动的函数: 1 div#demo { 2 width: 100px; 3 height: 100; 4 position: absolute; 5 left: 0; 6 top: 0; 7 } 8 9 10 var div = document.getElementById('demo'); 11 var timer = window.setInterval(function () { 12 div.style.left = parseInt(getStyle(div,