任何支持style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性。这个style 对象是CSSStyleDeclaration 的实例,包含着通过HTML 的style 特性指定的所有样式信息,但不包含与外部样式表或嵌入样式表经层叠而来的样式。在style 特性中指定的任何CSS 属性都将表现为这个style 对象的相应属性。对于使用短划线(分隔不同的词汇,例如background-image)的CSS 属性名,必须将其转换成驼峰大小写形式,才能通过JavaScript 来访问。下表列出了几个常见的CSS 属性及其在style 对象中对应的属性名。

多数情况下,都可以通过简单地转换属性名的格式来实现转换。其中一个不能直接转换的CSS 属性就是float。由于float 是JavaScript 中的保留字,因此不能用作属性名。“DOM2 级样式”规范规定样式对象上相应的属性名应该是cssFloat;Firefox、Safari、Opera 和Chrome 都支持这个属性,而IE支持的则是styleFloat。
只要取得一个有效的DOM元素的引用,就可以随时使用JavaScript 为其设置样式。以下是几个例子。

var myDiv = document.getElementById("myDiv");
//设置背景颜色
myDiv.style.backgroundColor = "red";
//改变大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定边框
myDiv.style.border = "1px solid black";

在以这种方式改变样式时,元素的外观会自动被更新。

在标准模式下,所有度量值都必须指定一个度量单位。在混杂模式下,可以将style.width 设置为"20",浏览器会假设它是"20px";但在标准模式下,将style.width 设置为"20"会导致被忽略——因为没有度量单位。在实践中,最好始终都指定度量单位。

通过style 对象同样可以取得在style 特性中指定的样式。以下面的HTML 代码为例。

<div id="myDiv" style="background-color:blue; width:10px; height:25px"></div>

在style 特性中指定的样式信息可以通过下列代码取得。

alert(myDiv.style.backgroundColor); //"blue"
alert(myDiv.style.width); //"10px"
alert(myDiv.style.height); //"25px"

如果没有为元素设置style 特性,那么style 对象中可能会包含一些默认的值,但这些值并不能准确地反映该元素的样式信息。

1. DOM 样式属性和方法

“DOM2级样式”规范还为style 对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同时,也可以修改样式。下面列出了这些属性和方法。

  • cssText:如前所述,通过它能够访问到style 特性中的CSS 代码。
  • length:应用给元素的CSS 属性的数量。
  • parentRule:表示CSS 信息的CSSRule 对象。本节后面将讨论CSSRule 类型。
  • getPropertyCSSValue(propertyName):返回包含给定属性值的CSSValue 对象。
  • getPropertyPriority(propertyName):如果给定的属性使用了!important 设置,则返回"important";否则,返回空字符串。
  • getPropertyValue(propertyName):返回给定属性的字符串值。
  • item(index):返回给定位置的CSS 属性的名称。
  • removeProperty(propertyName):从样式中删除给定属性。
  • setProperty(propertyName,value,priority):将给定属性设置为相应的值,并加上优先权标志("important"或者一个空字符串)。

通过cssText 属性可以访问style 特性中的CSS代码。在读取模式下,cssText 返回浏览器对style特性中CSS 代码的内部表示。在写入模式下,赋给cssText 的值会重写整个style 特性的值;也就是说,以前通过style 特性指定的样式信息都将丢失。例如,如果通过style 特性为元素设置了边框,然后再以不包含边框的规则重写cssText,那么就会抹去元素上的边框。下面是使用cssText 属性的一个例子。

myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);

设置cssText 是为元素应用多项变化最快捷的方式,因为可以一次性地应用所有变化。
设计length 属性的目的,就是将其与item()方法配套使用,以便迭代在元素中定义的CSS 属性。
在使用length 和item()时,style 对象实际上就相当于一个集合,都可以使用方括号语法来代替item()来取得给定位置的CSS 属性,如下面的例子所示。

for (var i=0, len=myDiv.style.length; i < len; i++){
alert(myDiv.style[i]); //或者myDiv.style.item(i)
}

无论是使用方括号语法还是使用item()方法,都可以取得CSS 属性名("background-color",不是"backgroundColor")。然后,就可以在getPropertyValue()中使用取得的属性名进一步取得属性的值,如下所示。

var prop, value, i, len;
for (i = 0, len = myDiv.style.length; i < len; i++) {
prop = myDiv.style[i]; //或者 myDiv.style.item(i)
value = myDiv.style.getPropertyValue(prop);
alert(prop + " : " + value);
}

getPropertyValue()方法取得的始终都是CSS 属性值的字符串表示。如果你需要更多信息,可以使用getPropertyCSSValue()方法,它返回一个包含两个属性的CSSValue 对象,这两个属性分别是:cssText 和cssValueType。其中,cssText 属性的值与getPropertyValue()返回的值相同,而cssValueType 属性则是一个数值常量,表示值的类型:0 表示继承的值,1 表示基本的值,2 表示值列表,3 表示自定义的值。以下代码既输出CSS 属性值,也输出值的类型。

var prop, value, i, len;
for (i = 0, len = myDiv.style.length; i < len; i++) {
prop = myDiv.style[i]; //或者myDiv.style.item(i)
value = myDiv.style.getPropertyCSSValue(prop);
alert(prop + " : " + value.cssText + " (" + value.cssValueType + ")");
}

运行一下
在实际开发中,getPropertyCSSValue()使用得比getPropertyValue()少得多。IE9+、Safarie3+以及Chrome 支持这个方法。Firefox 7 及之前版本也提供这个访问,但调用总返回null。
要从元素的样式中移除某个CSS 属性,需要使用removeProperty()方法。使用这个方法移除一个属性,意味着将会为该属性应用默认的样式(从其他样式表经层叠而来)。例如,要移除通过style特性设置的 border 属性,可以使用下面的代码。

myDiv.style.removeProperty("border");

在不确定某个给定的CSS 属性拥有什么默认值的情况下,就可以使用这个方法。只要移除相应的属性,就可以为元素应用默认值。

除非另有说明,本节讨论的属性和方法都得到了IE9+、Firefox、Safari、Opera 9+以及Chrome 的支持。

2. 计算的样式

虽然style 对象能够提供支持style 特性的任何元素的样式信息,但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。“DOM2 级样式”增强了document.defaultView,提供了getComputedStyle()方法。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如":after")。如果不需要伪元素信息,第二个参数可以是null。getComputedStyle()方法返回一个CSSStyleDeclaration 对象(与style 属性的类型相同),其中包含当前元素的所有计算的样式。
以下面这个HTML 页面为例。

<!DOCTYPE html>
<html>
<head>
<title>
Computed Styles Example
</title>
<style type="text/css">
#myDiv { background-color: blue; width: 100px; height: 200px; }
</style>
</head>
<body>
<div id="myDiv" style="background-color: red; border: 1px solid black">
</div>
</body>
</html>

运行一下
应用给这个例子中<div>元素的样式一方面来自嵌入式样式表(<style>元素中的样式),另一方面来自其style 特性。但是,style 特性中设置了backgroundColor 和border,没有设置width和height,后者是通过样式表规则应用的。以下代码可以取得这个元素计算后的样式。

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); // "red"
alert(computedStyle.width); // "100px"
alert(computedStyle.height); // "200px"
alert(computedStyle.border); // 在某些浏览器中是"1px solid black"

运行一下
在这个元素计算后的样式中,背景颜色的值是"red",宽度值是"100px",高度值是"200px"。我们注意到,背景颜色不是"blue",因为这个样式在自身的style 特性中已经被覆盖了。边框属性可能会也可能不会返回样式表中实际的border 规则(Opera 会返回,但其他浏览器不会)。存在这个差别的原因是不同浏览器解释综合(rollup)属性(如border)的方式不同,因为设置这种属性实际上会涉及很多其他属性。在设置border 时, 实际上是设置了四个边的边框宽度、颜色、样式属性( border-left-width 、border-top-color 、border-bottom-style , 等等)。因此, 即使computedStyle.border 不会在所有浏览器中都返回值,但computedStyle.borderLeftWidth 会返回值。

需要注意的是,即使有些浏览器支持这种功能,但表示值的方式可能会有所区别。例如,Firefox 和Safari 会将所有颜色转换成RGB 格式(例如红色是rgb(255,0,0))。因此,在使用getComputedStyle()方法时,最好多在几种浏览器中测试一下。

IE 不支持getComputedStyle()方法,但它有一种类似的概念。在IE 中,每个具有style 属性的元素还有一个currentStyle 属性。这个属性是CSSStyleDeclaration 的实例,包含当前元素全部计算后的样式。取得这些样式的方式也差不多,如下面的例子所示。

var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined

运行一下
与DOM 版本的方式一样,IE 也没有返回border 样式,因为这是一个综合属性。
无论在哪个浏览器中,最重要的一条是要记住所有计算的样式都是只读的;不能修改计算后样式对象中的CSS 属性。此外,计算后的样式也包含属于浏览器内部样式表的样式信息,因此任何具有默认值的CSS 属性都会表现在计算后的样式中。例如,所有浏览器中的visibility 属性都有一个默认值,但这个值会因实现而异。在默认情况下,有的浏览器将visibility 属性设置为"visible",而有的浏览器则将其设置为"inherit"。换句话说,不能指望某个CSS 属性的默认值在不同浏览器中是相同的。如果你需要元素具有某个特定的默认值,应该手工在样式表中指定该值。

下载离线版教程:http://www.shouce.ren/api/view/a/15218

12.2.1 访问元素的样式【JavaScript高级程序设计第三版】的更多相关文章

  1. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  2. 2.1 <script>元素【JavaScript高级程序设计第三版】

    向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...

  3. DOM 操作技术【JavaScript高级程序设计第三版】

    很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...

  4. javascript高级程序设计第三版书摘

    在HTML 中使用JavaScript <script>元素 在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...

  5. 10.2 DOM 操作技术【JavaScript高级程序设计第三版】

    很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...

  6. 10.1.2 Document类型【JavaScript高级程序设计第三版】

    JavaScript 通过Document 类型表示文档.在浏览器中,document 对象是HTMLDocument(继承自Document 类型)的一个实例,表示整个HTML 页面.而且,docu ...

  7. 14.5 富文本编辑【JavaScript高级程序设计第三版】

    富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得).在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一.虽然也没有规范,但在IE 最早 ...

  8. 模拟事件【JavaScript高级程序设计第三版】

    事件,就是网页中某个特别值得关注的瞬间.事件经常由用户操作或通过其他浏览器功能来触发.但很少有人知道,也可以使用JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样 ...

  9. 4.1 基本类型和引用类型的值【JavaScript高级程序设计第三版】

    ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 在将一个值赋给变量时,解析器必须确定这个值是基 ...

随机推荐

  1. python进程与线程介绍

    很多同学都听说过,现代操作系统比如Mac OS X,UNIX,Linux,Windows等,都是支持“多任务”的操作系统. 什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务.打个比方,你 ...

  2. SDET面试之感受篇。

    某年某月的某一天,我来到了太监村的一栋大厦,因为早到了半个小时,拿出来提前准备好的code随便的翻看着. 人家都说,面试头五分钟就已经决定了,是否能面试成功.所以,面试真正的真谛可能就是相面.什么写c ...

  3. 记录项目代码迁移后,UI测试框架的搭建(配置文件的修改、测试脚本试运行)

    前文:记录一次项目代码迁移过程 上文代码迁移的目的就是为了新增vue脚手架自带的UI测试框架,工具有了,就需要实践运行在项目中了(修改配置文件.编写测试脚本等). 一.单元测试 测试框架 karma ...

  4. Do the Untwist

      Do the Untwist Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. ThinkPHP5.0版本的优势在于:

    更灵活的路由: 依赖注入: 请求缓存: 更强大的查询语法: 引入了请求/响应对象: 路由地址反解生成: 增强的模型功能: API开发友好: 改进的异常机制: 远程调试支持: 单元测试支持: 命令行工具 ...

  6. cobbler自动安装

    基础环境:centos7.2 本地IP地址:192.168.56.12 网络环境:桥接模式 一.安装cobbler # rpm -ivh http://mirrors.aliyun.com/epel/ ...

  7. linux下使用libxml2实现对xml文件的读取及查询

    由于项目需要,这两天在用C++做XML文件解析的工作.在linux下有个很方便的操作xml文件的库——libxml2,它提供了一套创建和查询xml文件的C语言的接口.这篇博客主要介绍如何使用libxm ...

  8. IOS 录音(AVAudioRecorder)

    #import "HMViewController.h" #import <AVFoundation/AVFoundation.h> @interface HMView ...

  9. datatable 动态显示/隐藏列

    这个例子演示了 column().visible()方法来隐藏显示列,通过点击列按钮动态切换 <table id="example" class="display& ...

  10. 十天精通CSS3

    课程地址:http://www.imooc.com/learn/33 第1章 初识CSS3 CSS3课程列出第一站,先带领大家进入CSS3的世界,探索CSS3的魅力! 你做好准备了吗? 第2章 边框 ...