第17章　脚本化CSS

CSS脚本化是网页交互效果的技术基础，使用CSS和JavaScript可以设计网页动画。利用脚本化CSS可以动态地改变HTML属性，如字体颜色、字体大小等，还可以用它设置和改变元素的位置、隐藏或显示元素。动画是一种视觉效果，它就是由无数帧静态画面拼接的连续动作，主要包括尺寸、位置、显隐动画构成要素。本章将详细讲解脚本化CSS编程基础，以及如何设计大小变形、网页内容滑动、展开、折叠、位置移动、渐隐渐显动画等网页特效。

【学习重点】

▲　了解CSS脚本化基本信息

▲　使用代码控制行内样式

▲　使用JavaScript控制样式表

▲　动态设计对象大小

▲　动态设计位移和定位

▲　动态设计显隐状态

▲　设计CSS动画

17.1　脚本化CSS概述

脚本化CSS在页面设计中可以帮助用户完成如下任务。

☑　显隐特效：这是比较常用的网页动态效果，主要借助CSS的display和visibility属性实现。如果结合渐隐、渐显和各种动画序列，可以设计更复杂的视觉效果。

☑　尺寸缩放：使用CSS的height和width属性实现。在变形动画中比较常用，例如，设计图像、栏目、页面展开、收缩等；动态控制目标对象的大小，设计变化的页面布局等。

☑　对象定位：使用CSS的position、left、top、right和button等属性实现。在位移动画中比较常用，如开发网页游戏。在Web应用中是不可缺少的技术基础。

☑　视图控制：使用CSS的clip、overflow和visibility等属性实现，可以动态控制页面对象的显示方式和显示内容等。

☑　透明设计：使用CSS的opacity属性实现，一般与显隐、缩放、位移动画配合使用，增强渐进、渐弱效果。

☑　对象效果：如动态改变字体样式、文本版式、网页布局版式等，设计图像特效等。

☑　UI交互：配合CSS+HTML，设计强大功能的交互表格、交互表单，设计富有变化的网页皮肤，在Web应用中模拟传统界面效果等。

上面列举了常规动态样式应用的形式，当然还远远不止于这些内容，随着各种新技术的出现，用户还会发现更多创意形式，如HTML5+CSS3、Ajax+CSS、jQuery、移动技术等。

17.1.1　认识CSS脚本属性

DOM定义了一个CSS2Properties对象，该对象表示一组CSS属性及其值。它符合CSS规范，所有CSS属性都定义了对应的脚本属性（style属性）。在脚本中，每个元素节点的style属性都是一个可读可写的CSS2Properties对象成员。

CSS脚本属性与CSS属性存在对应关系，详细说明如表17-1所示。这些脚本属性完全符合标准要求，并得到了不同浏览器的支持。

表17-1　CSS脚本属性

续表

基于表17-1属性取值的使用说明如下：

☑　使用“|”单竖线符号分隔值，表示可以且必须设置其中一个。例如，“table-layout:auto | fixed”表示table-layout属性取值可以选择auto，或选择fixed，且必须要选择其中一个。

☑　使用“||”双竖线符号分隔值，表示值是可选项，但至少指定一个值，也可以指定多个值，而且它们没有先后顺序之分。例如，“border:[ border-width || border-style || color ]”就表示border属性取值可以包括border-width属性值、border-style属性值或者color属性值，或者设置多个或全部所指属性值。

☑　使用“[]”方括号包含多个值列表，表示对值进行分组。

☑　使用“*”星号表示前面的值或值组可以出现0次或多次。例如，“cursor:[ [ url(url) ,]*”就表示鼠标指针样式可以自定义多个外部图标，或者也可以不定义。

☑　使用“?”问号表示前面的项目是可选的，可以出现0次或一次。例如，“font:[ [font-style||font-variant||font-weight]? font-size[/line-height]? font-family]|caption|icon|menu|message-box|small-caption|status-bar”就是表示可以不为font属性设置font-style、font-variant和|font-weight属性值，也可以有选择地设置。

☑　使用“{}”大括号表示重复的次数。例如，{2}说明前面的项目可重复两次，而{1,4}表示前面的项目至少出现1次，至多出现4次。

☑　string、length、color、percentage、integer等关键字表示数据类型。string表示字符串；length表示长度，长度值后面应该增加单位后缀；color表示颜色值（具体用法可以参阅前面章节）；percentage表示百分比值；integer表示整数。

☑　normal、auto、inherit、none和url等关键字表示一些特殊语义。其中normal表示正常，auto表示自动，inherit表示继承父类的样式，none表示没有属性值，url表示引用外部文件的路径。

17.1.2　CSS样式模型概述

在DOM2级规范中，与CSS脚本化相关的规范都包含在StyleSheets、CSS和CSS2这3个模块中（http://www.w3.org/TR/DOM-Level-2-Style/）。

StyleSheets模块定义了3个接口：StyleSheet、StyleSheetList和MediaList，它们从不同技术角度控制样式表如何与HTML文档进行关联。

☑　CSS模块包括CSS和CSS2两个子模块，实际上它们是针对CSS 1.0版本和CSS 2.0版本分别进行的功能封装。CSS模块定义了众多接口：CSSStyleSheet、CSSRuleList、CSSRule、CSSStyleRule、CSSMediaRule、CSSFontFaceRule、CSSPageRule、CSSImportRule、CSSCharsetRule、CSSUnknownRule、CSSStyleDeclaration、CSSValue、CSSPrimitiveValue、CSSValueList、RGBColor、Rect和Counter。这些接口包括自己的属性和方法，分别负责完成相应的CSS技术功能。DOM又在客户端Document对象中定义了同名的属性，与这些接口相映射，这样访问CSS模块中某个接口，可以通过Document对象的属性实现访问。

☑　由于CSS模块包含的接口众多，我们无法一一列举，而且很多都与CSS技术本身是紧密相连的，如果了解CSS技术，那么对于这些接口技术的应用也就一通百通。下面将重点讲解在CSS模块中使用最频繁且复杂的3个对象：CSSStyleSheet、CSSStyleRule和CSSStyleDeclaration。

由于一些浏览器不支持DOM 2规范中CSS样式控制模型部分或全部特性，但是都无一例外地支持早期实现的CSS脚本化控制特性（即所谓的DOM 0级样式控制模型），访问这些对象的方法与DOM 2样式规范中规定的方法是不同的。这给CSS脚本化控制带来了很多麻烦，用户需要考虑浏览器的兼容问题。

CSSStyleSheet接口负责检索并存储了文档中所有的CSS样式表，包括外部样式表和使用<style type="text/css"></style>标签定义的内部样式表。我们可以借助Document对象的styleSheets属性访问该接口对应的CSSStyleSheet对象的列表。CSSStyleSheet对象定义了很多属性，如表17-2所示。

表17-2　CSSStyleSheet对象的属性

CSSStyleRule接口负责检索并存储了每个样式表中所有的CSS规则。每个CSSStyleSheet对象内部都包含一组CSSStyleRule对象。例如，下面的这个样式表就可以表示一个CSSStyleSheet对象，其中包含了两个CSSStyleRule对象，分别对应第一条规则（body）和第二条规则（h2）：

CSSStyleRule对象定义的属性如表17-3所示。

表17-3　CSSStyleRule对象的属性

CSSStyleDeclaration接口负责检索并存储每个CSS规则中CSS样式声明。每个CSSStyleDeclaration对象表示一个元素的style属性，或者表示一条声明，如font-size:12px;就是一条声明。与CSSStyleRule对象类似，CSSStyleDeclaration对象定义的属性如表17-4所示。

表17-4　CSSStyleDeclaration对象的属性

DOM还定义了一个通过CSS2Properties访问CSSStyleDeclaration对象实例的快捷方法。

17.2　操作行内样式

在JavaScript脚本中获取页面元素之后，就可以使用style属性获取该元素的CSS2Properties对象。CSS2Properties包含了所有CSS脚本属性。设置这些属性与设置CSS样式的效果是一样的。

不过使用style属性只能设置元素的行内样式，且不能使用CSS2Properties对象获取样式表中的信息。

17.2.1　CSS脚本属性名规范

CSS中很多属性都是复合名，使用连字符连接多个单词。例如，border-right表示右边框样式，而border-right-color表示右边框的颜色效果。但是在脚本中，连字符被定义为减号，会自动参与表达式的运算。因此，CSS2Properties对象所定义的属性名与CSS属性名是不同的。

如果对应CSS属性名包含一个或多个连字符，那么CSS2Properties就会删除这些连字符，并根据驼峰命名法重命名CSS脚本属性名。

【示例】对于border-right-color属性来说，在脚本中应该使用borderRightColor。所以下面页面脚本中的用法都是错误的。

针对上面页面脚本，可以修改为：

提示：在设置CSS脚本属性时，应注意几个问题：

☑　由于float是JavaScript保留字，禁止用户使用。因此，CSS2Properties内没有与float属性对应的名称。为了解决这个问题，CSS2Properties在float属性前增加了css前缀，使用cssFloat名来表示脚本中的float属性。

☑　在CSS中设置属性值时，不需要考虑值的类型。但是在JavaScript中，CSS2Properties对象认定所有CSS属性值都是字符串，因此脚本中所有属性值都必须加上引号，以表示为字符串数据类型。例如：

        elementNode.style.fontFamily ="Arial, Helvetica, sans-serif";elementNode.style.cssFloat ="left";elementNode.style.color ="#ff0000";

☑　在CSS样式中声明尾部的分号不能够作为属性值的一部分被引用，脚本中的分号只是JavaScript语法规则的一部分，而不是CSS声明中分号的引用。

☑　声明中属性值所包含的单位等都必须作为值的一部分，完整地传递给CSS脚本属性，省略单位则所设置的脚本样式无效。例如：

        elementNode.style.width ="100px";

☑　在脚本中可以动态设置属性值，但最终赋值给属性的值应是一个字符串，且必须包含单位。例如：

        elementNode.style.top=top +"px";elementNode.style.right=right +"px";elementNode.style.bottom=bottom +"px";elementNode.style.left=left +"px";

17.2.2　使用style对象

DOM定义每个元素都自动拥有一个style属性，style对象包含一些方法，利用这些方法可以与CSS样式实现交互。但是，style对象针对的是行内样式，不支持操作样式表，包括内部样式表（<style>标签包含的样式）或外部样式表。

1．getPropertyValue()方法

getPropertyValue()能够获取指定元素样式属性的值。具体用法如下：

     var value=e.style.getPropertyValue(propertyName)

参数propertyName表示CSS属性名，不是CSS脚本属性名，对于复合名应该使用连字符进行连接。

【示例1】下面代码使用getPropertyValue()方法获取行内样式中width属性值，然后输出到盒子内显示，如图17-1所示。

图17-1　使用getPropertyValue()方法读取行内样式

早期IE版本不支持getPropertyValue()方法，但是可以通过style对象直接访问样式属性，以获取指定样式的属性值。

【示例2】针对上面示例代码，可以使用如下方式读取width属性值。

2．setProperty()方法

setProperty()方法为指定元素设置样式。具体用法如下：

     e.style.setProperty(propertyName, value, priority)

参数说明如下。

☑　propertyName：设置CSS属性名。

☑　value：设置CSS属性值，包含属性值的单位。

☑　priority：表示是否设置!important优先级命令，如果不设置可以以空字符串表示。

【示例3】在本示例中使用setProperty()方法定义盒子的显示宽度和高度分别为400像素和200像素。

如果要兼容早期IE浏览器，则可以使用如下方式设置。

3．removeProperty()方法

removeProperty()方法可以移出指定CSS属性的样式声明。具体用法如下：

     e.style. removeProperty (propertyName)

4．item()方法

item()方法返回style对象中指定索引位置的CSS属性名称。具体用法如下：

     var name=e.style.item(index)

参数index表示CSS样式的索引号。

5．getPropertyPriority()方法

getPropertyPriority()方法可以获取指定CSS属性中是否附加了!important优先级命令，如果存在则返回“important”字符串，否则返回空字符串。

【示例4】在本示例中，定义鼠标移过盒子时，设置盒子的背景色为蓝色，而边框颜色为红色，当移出盒子时，又恢复到盒子默认设置的样式；而单击盒子时则在盒子内输出动态信息，显示当前盒子的宽度和高度，演示效果如图17-2所示。

图17-2　设计动态交互样式效果

【示例5】针对示例4，下面使用一种快捷方式设计相同的交互效果，这样能够兼容IE早期版本，页面代码如下：

【拓展】非IE浏览器也支持style快捷访问方式，但是它无法获取style对象中指定序号位置的属性名称，此时可以使用cssText属性读取全部style属性值，借助JavaScript方法再把返回字符串劈开为数组。

【示例6】在本示例中，使用cssText读取全部行内样式字符串，然后使用String的split()方法把字符串劈开为数组，使用for in语句遍历数组，逐一读取每个样式，再使用split()方法劈开属性和属性名，最后格式化输出显示，演示效果如图17-3所示。

图17-3　使用cssText属性获取行内样式

使用getAttribute()方法也可以获取style属性值。不过该方法返回值保留style属性值的原始模样，而cssText属性返回值可能经过浏览器处理，且不同浏览器返回值格式略有不同。

【示例7】修改示例6的代码，使用getAttribute()方法获取行内样式字符串信息。

17.3　操作样式表

使用style对象可以操作行内样式，但无法访问样式表。而使用styleSheets对象可以访问<style>标签定义的内部样式表，以及使用<link>标签或@import命令导入的外部样式表。styleSheets对象属于document，通过document.styleSheets进行访问。

17.3.1　使用styleSheets对象

Document对象包含一个styleSheets子对象，该子对象保存了文档中所有的样式表，包括内部样式表和外部样式表。

styleSheets为每个样式表定义了一个cssRules对象，用来包含指定样式表中所有的规则（样式）。但是IE不支持cssRules对象，而预定义了rules对象表示样式表中的规则。

为了兼容主流浏览器，在使用前应该检测用户所使用浏览器的类型，以便调用不同的对象：

     var cssRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;

在上面代码中，先判断浏览器是否支持cssRules对象，如果支持则使用cssRules（非IE浏览器），否则使用rules（IE浏览器）。

【示例】在本示例中，通过<style>标签定义一个内部样式表，为页面中的<div id="box">标签定义4个属性：宽度、高度、背景色和边框。然后在脚本中使用styleSheets访问这个内部样式表，把样式表中的第一个样式的所有规则读取出来，在盒子中输出显示，如图17-4所示。

图17-4　使用styleSheets访问内部样式表

提示：cssRules（或rules）的style对象在访问CSS属性时，使用的是CSS脚本属性名，因此所有属性名称中不能使用连字符。例如：

        cssRules[0].style.backgroundColor;

这与行内样式中的style对象的setProperty()方法不同，setProperty()方法使用的是CSS属性名。例如：

        box.style.setProperty("background-color","blue","");

17.3.2　访问样式表中的样式

styleSheets包含文档中所有样式表，用户可以通过下标访问每个样式表，每个数组元素代表一个样式表，数组的索引位置是根据样式表在文档中的位置决定的。每个<style>标签包含的所有样式表示一个内部样式表，每个独立的CSS文件表示一个外部样式表。

【示例】本示例演示如何准确找到指定样式表中的样式属性。操作步骤如下：

第1步，启动Dreamweaver，新建CSS文件，保存为style1.css，存放在根目录下。

第2步，在style1.css中输入下面的样式代码，定义一个外部样式表。

     @charset"utf-8";body { color:black; }p { color:gray; }div { color:white; }

第3步，新建HTML文档，保存为test.html，保存在根目录下。

第4步，使用<style>标签定义一个内部样式表，设计如下样式。

     <style type="text/css">#box { color:green; }.red { color:red; }.blue { color:blue; }</style>

第5步，使用<link>标签导入外部样式表文件style1.css。

     <link href="style1.css" rel="stylesheet" type="text/css" media="all" />

第6步，在文档中插入一个<div id="box">标签。

     <div id="box"></div>

第7步，使用<script>标签在头部位置插入一段脚本。设计在页面初始化完毕后，使用styleSheets访问文档中第二个样式表，然后再访问该样式表的第一个样式中的color属性。

第8步，保存页面，整个文档的代码如下：

最后，在浏览器中预览页面，则可以看到访问的color属性值为black，如图17-5所示。

图17-5　使用styleSheets访问外部样式表

提示：上面示例中styleSheets[1]表示外部样式表文件（style1.css），而cssRules[0]就表示外部样式表文件中的第一个样式。cssRules[0].style.color可以获取外部样式表文件中第一个样式中的color属性的声明值；反之，如果把<link>标签放置在内部样式表的上面，即代码如下：

        <head><link href="style1.css" rel="stylesheet" type="text/css" media="all" /><style type="text/css">#box { color:green; }.red { color:red; }.blue { color:blue; }</style></head>

上面脚本将返回内部样式表中第一个样式中的color属性生命值，即为green。如果把外部样式表转换为内部样式表，或者把内部样式表转换为外部样式表文件，不会影响styleSheets的访问。因此，样式表和样式的索引位置是不受样式表类型，以及样式的选择符限制的。任何类型的样式表（不管是内部的，还是外部的）都在同一个平台上按在文档中解析位置进行索引。同理，不同类型选择符的样式在同一个样式表中也是根据先后位置进行索引。

17.3.3　读取样式的选择符

使用styleSheets和cssRules（或rules）可以获取文档样式表中任意样式。另外，每个CSS样式都包含selectorText属性，使用该属性可以获取样式的选择符。

【示例】在本示例中，使用selectorText属性获取第一个样式表（styleSheets[0]）中的第三个样式（cssRules[2]）的选择符，输出显示为“.blue”，如图17-6所示。

图17-6　使用selectorText访问样式选择符

17.3.4　编辑样式

cssRules的style对象不仅可以访问属性，还可以设置属性值。

【示例】在本示例中，样式表中包含3个样式，其中蓝色样式类（.blue）定义字体显示为蓝色。然后利用脚本修改该样式类（.blue规则）字体颜色显示为浅灰色（#999），最后显示效果如图17-7所示。

图17-7　修改样式表中的样式

提示：上述方法修改样式表中的类样式，会影响其他对象或其他文档对当前样式表的引用，因此在使用时请务必谨慎。

17.3.5　添加样式

使用addRule()方法可以为样式表增加一个样式。该方法具体用法如下：

     styleSheet.addRule(selector,style,[index])

styleSheet表示样式表引用，参数说明如下。

☑　selector：表示样式选择符，以字符串的形式传递。

☑　style：表示具体的声明，以字符串的形式传递。

☑　index：表示一个索引号，表示添加样式在样式表中的索引位置，默认为-1，表示位于样式表的末尾，该参数可以不设置。

Firefox浏览器不支持addRule()方法，但是支持使用insertRule()方法添加样式。insertRule()方法的用法如下：

     styleSheet.insertRule(rule,[index])

参数说明如下。

☑　rule：表示一个完整的样式字符串。

☑　index：与addRule()方法中的index参数作用相同，但默认为0，放置在样式表的末尾。

【示例】在本示例中，先在文档中定义一个内部样式表，然后使用styleSheets集合获取当前样式表，利用数组默认属性length获取样式表中包含的样式个数。

最后在脚本中使用addRule()（或insertRule()）方法增加一个新样式，样式选择符为p，样式声明为背景色为红色，字体颜色为白色，段落内部补白为1个字体大小。

保存页面，在浏览器中预览，则显示效果如图17-8所示。

图17-8　为段落文本增加样式

17.3.6　访问显示样式

CSS样式能够重叠，这会导致当一个对象被定义了多个样式后，显示的效果未必都是某个样式所设计的效果。也就是说，定义样式与显示样式并非完全重合。DOM定义了一个方法帮助用户快速检测当前对象的显示样式，不过IE和标准DOM之间实现的方法不同。下面分别进行说明。

☑　IE浏览器

IE浏览器定义了一个currentStyle对象，该对象是一个只读对象。currentStyle对象包含了文档内所有元素的style对象定义的属性，以及任何未被覆盖的CSS规则的style属性。

【示例1】针对17.3.5节示例，给类样式blue增加一个背景色为白色的声明，然后把该类样式应用到段落文本中。

在浏览器中预览，会发现脚本中使用insertRule()（或addRule()）方法添加的样式无效，效果如图17-9所示。

图17-9　背景样式重叠后的效果

如果没有考虑到样式重叠问题，用户会陷入迷惑，这时可以使用currentStyle对象获取当前p元素最终显示了哪些样式，这样就可以找到insertRule()（或addRule()）方法添加的样式失效的原因。

【示例2】把示例1另存为test1.html，然后在脚本中添加代码，使用currentStyle获取当前段落标签<p>的最终显示样式，显示效果如图17-10所示。

图17-10　在IE中获取p的显示样式

在上面代码中，首先使用getElementsByTagName()方法获取段落文本的引用。然后调用该对象的currentStyle子对象，并获取指定属性的对应值。通过这种方式，会发现insertRule()（或addRule()）方法添加的样式被blue类样式覆盖，这是因为类选择符的优先级大于标签选择符的样式。

☑　非IE浏览器

DOM定义了一个getComputedStyle()方法，该方法可以获取目标对象的显示样式，但是它需要使用document.defaultView对象进行访问。

getComputedStyle()方法包含了两个参数：第一个参数表示元素，用来获取样式的对象；第二个参数表示伪类字符串，定义显示位置，一般可以省略，或者设置为null。

【示例3】针对示例2，为了能够兼容非IE浏览器，下面对页面脚本进行修改。使用if语句判断当前浏览器是否支持document.defaultView，如果支持则进一步判断是否支持document.defaultView. getComputedStyle，如果支持则使用getComputedStyle()方法读取最终显示样式；否则，判断当前浏览器是否支持currentStyle，如果支持则使用它读取最终显示样式。

保存页面，在Firefox中预览，则显示效果如图17-11所示。

图17-11　在Firefox中获取p的显示样式

17.4　控制大小

大小是指页面元素在网页环境中存在或显示的宽度和高度。“存在”和“显示”对于元素来说，是两个不同的概念，存在元素的大小可能会大于可视区域，也可能显示出来的区域大于存在的大小。

在设计动态HTML效果时，经常需要获取或修改元素的大小。获取元素的大小应该是件很轻松的事情，但是由于浏览器的不兼容性，以及网页环境的复杂性，获取元素的真实大小比较麻烦。

17.4.1　案例：从样式表中读取宽度和高度

每个元素的显示属性都存储在CSS样式表中，如果能够从中读取元素的width和height属性，就可以精确获得它的大小。前面曾经介绍过，在JavaScript中访问元素的CSS属性，可以通过元素的style属性获得。style是一个集合对象，它内部包含很多CSS脚本属性。

【示例1】本示例演示了如何使用style属性设置元素的显示宽度，并读取该宽度值：

当然，上述方法也存在以下两个问题。

问题一：在JavaScript中设置或读取CSS属性值时，都必须包含单位，且传递或返回的值都是字符串，如上面代码所示。这在开发方面，多少有些不便。

问题二：通过这种方式获得的信息往往是不准确的。因为style属性中并不包含元素的样式属性的默认值。例如，如果在样式表或行内样式中未显式定义div元素的宽度，则根据它的默认值（即auto）实际宽度显示为100%。此时，如果使用元素的style属性读取width值，则返回空字符串。

     <div id="div" style="border:solid;"></div><script>var div=document.getElementsByTagName("div")[0];alert(div.style.width);                             //返回空字符串</script>

显然，这不是元素真实宽度。考虑到兼容性，当获取元素最终样式的属性时还需要针对不同的浏览器分别进行设计。

【示例2】自定义扩展函数，兼容IE和标准实现方法。函数参数设计为当前元素（e）和元素属性名（n），函数返回值为该元素的样式的属性值。

DOM标准在读取CSS属性值时比较特殊，它遵循CSS语法规则中约定的属性名，即在复合属性名中使用连字符来连接多个单词，而不是遵循驼峰命名法，利用首字母大写的方式来区分不同的单词。例如，属性borderColor被传递给DOM时，就需要转换为border-color，否则就会错判。因此，对于传递的参数名还需要进行转换，不过利用正则表达式可以轻松实现。

下面调用这个扩展函数来获取指定元素的实际宽度：

如果为div元素显式定义200像素的宽度：

     <div id="div" style="width:200px;border-style:solid;"></div>

则调用扩展函数getStyle()后，就会返回字符串"200px"：

     var w=getStyle(div,"width");                 //调用扩展函数，返回字符串"200px"

17.4.2　案例：把样式属性值转换为实际值

在17.4.1节中，演示了如何从CSS样式表中抽取元素的实际值。同时，通过示例验证得知，getStyle()扩展函数所抽取的值依然保持字符串格式，且值中包含有单位，这样的值不适合参与脚本计算。而且抽取的值中还可能包含auto默认值。

auto表示父元素的宽度，但是这只有通过人工计算才能够获取。另外，对于百分比取值是根据父元素的宽度进行计算的。如果在多层嵌套的结构中，当各层元素的取值单位不同时，该如何计算当前元素的宽度或高度值？

【示例1】本示例是一个复杂的嵌套结构，中间包含多层元素，且宽度取值都是百分比。如何在JavaScript脚本中读取当前元素的宽度？

可以设计一个简单迭代计算，使用getStyle()扩展函数抽取每层元素的宽度值，把百分比转换为数值，然后相乘即可。

上述方法很直接，但是比较简陋，缺乏灵活性。

【示例2】下面设计一个扩展函数fromStyle()，该函数是对getStyle()进行补充。设计fromStyle()函数的参数为要获取大小的元素，以及利用getStyle()函数所得到的值。然后返回这个元素的具体大小值（即为具体的数字）。

最后，针对上面的嵌套结构，调用该函数就可以直接计算出元素的实际值：

如果要获取元素的高度值，则应该在getStyle()函数中修改第二个参数值为字符串"height"即可，包括在fromStyle()函数中调用的getStyle()函数参数值。

17.4.3　案例：使用offsetWidth和offsetHeight

使用offsetWidth和offsetHeight属性可以获取元素的尺寸，其中offsetWidth表示元素在页面中所占据的总宽度，offsetHeight表示元素在页面中所占据的总高度。

【示例1】使用offsetWidth和offsetHeight属性获取元素大小。

上面示例在IE的诡异模式下和支持DOM模型的浏览器中解析结果差异很大，其中IE诡异模式解析返回宽度为21像素，高度为21像素，而在支持DOM模型的浏览器中返回高度和宽度都为19像素。

根据上面示例中内行样式定义的值，可以算出最内层元素的宽和高都为12.5，实际取值为12像素。但是对于IE诡异解析模式来说，样式属性width和height的值就是元素的总宽度和总高度。由于IE是根据四舍五入法处理小数部分的值，故该元素的总高度和总宽度都是13像素。同时，由于IE模型定义每个元素都有一个默认行高，即使元素内不包含任何文本，所以实际高度就显示为21像素。

而对于支持DOM模型的浏览器来说，它们认为元素样式属性中的宽度和高度仅是元素内部包含内容区域的尺寸，而元素的总高度和总宽度应该加上补白和边框，由于元素默认边框值为3像素，所以最后计算的总高度和总宽度都是19像素。

提示：IE诡异模式是一种非标准的解析方法，与标准模式相对应，主要是因为IE浏览器为了兼容大量传统布局的网页。诡异模式在IE 6.0以下版本浏览器中存在，但是在IE 6.0及其以上版本浏览器中如果页面明确设置为诡异模式显示，或者HTML文档的DOCTYPE（文档类型）没有明确定义，也会按诡异模式进行解析。

【示例2】解决offsetWidth和offsetHeight属性的缺陷。

offsetWidth和offsetHeight属性是获取元素尺寸最好的方法，但是当为元素定义了隐藏属性，即设置样式属性display的值为none时，则offsetWidth和offsetHeight属性返回值都为0。

这种情况还会发生在当父级元素的display样式属性为none时，即当前元素虽然没有设置隐藏显示，但是根据继承关系，它也会被隐藏显示，此时offsetWidth和offsetHeight属性值都是0。总之，对于隐藏元素来说，不管它的实际高度和宽度是多少，最终使用offsetWidth和offsetHeight属性读取时都是0。

解决方法：先判断元素的样式属性display的值是否为none，如果不是，则直接调用offsetWidth和offsetHeight属性读取即可。如果为none，则可以暂时显示元素，然后读取它的尺寸，读完之后再把它恢复为隐藏样式。

先设计两个功能函数，使用它们可以分别重设和恢复元素的样式属性值。

再自定义函数getW()和getH()函数。不管元素是否被隐藏显示，这两个函数能够获取元素的宽度和高度。

最后，调用getW()和getH()函数进行测试：

17.4.4　案例：复杂环境下的元素尺寸

不同浏览器对于offsetWidth和offsetHeight属性的解析标准是不同的，同时复杂的显示环境会导致元素在不同场合下所呈现的效果迥异。在某些情况下，用户需要精确计算元素的尺寸，这时可以选用一些HTML元素特有的属性，这些属性虽然不是DOM标准的一部分，但是由于它们获得了所有浏览器的支持，所以在JavaScript开发中还是被普遍应用，说明如表17-5所示。

表17-5　与元素尺寸相关的属性

【示例】设计一个简单的盒子，盒子的height值为200像素，width值为200像素，边框显示为50像素，补白区域定义为50像素。内部包含信息框，其宽度设置为400像素，高度也设置为400像素，换句话说就是盒子的内容区域为（400px,400px）。

然后，利用JavaScript脚本在内容框中插入一些行列号：

盒子呈现效果如图17-12所示。

图17-12　盒模型及其相关构成区域

现在分别调用offsetHeight、scrollHeight、clientHeight属性，以及自定义函数getH()，则可以看到获取不同区域的高度，如图17-13所示。

图17-13　盒模型不同区域的高度示意图

通过上面的实例图，能够很直观地看出offsetHeight、scrollHeight、clientHeight这3个属性与自定义函数getH()的值不同，具体说明如下。

☑　offsetHeight=border-top-width+padding-top+height+padding-bottom+border-bottom-width

☑　scrollHeight=padding-top+包含内容的完全高度+padding-bottom

☑　clientHeight=padding-top+height+border-bottom-width –滚动条的宽度

上面围绕元素高度进行说明，针对宽度的计算方式可以依此类推，这里就不再重复。

提示：不同浏览器对于scrollHeight和scrollWidth属性解析方式不同。结合上面示例，具体说明如表17-6所示，而scrollWidth属性与scrollHeight属性雷同。

表17-6　浏览器解析scrollHeight和scrollWidth属性比较

如果设置盒子的overflow属性为visible，则clientHeight的值为300：

     clientHeight=padding-top+height+ border-bottom-width

如果隐藏滚动条显示，则clientHeight属性值不用减去滚动条的宽度，即滚动条的区域被转换为可视内容区域。同时，不同浏览器对于scrollHeight和scrollWidth属性的解析也不同，结合上面示例，具体说明如表17-7所示。

表17-7　浏览器解析scrollHeight和scrollWidth属性比较

17.4.5　案例：可视区域尺寸

scrollLeft和scrollTop属性可以获取移出可视区域外面的宽度和高度。用户利用这两个属性确定滚动条的位置，也可以使用它们获取当前滚动区域内容，说明如表17-8所示。

表17-8　scrollLeft和scrollTop属性说明

【示例】本示例演示了如何设置和更直观地获取滚动外区域的尺寸。

呈现效果如图17-14所示。

图17-14　scrollLeft和scrollTop属性指示区域示意图

17.4.6　案例：浏览器窗口尺寸

【示例1】如果获取<html>标签的clientWidth和clientHeight属性，就可以得到浏览器窗口的可视宽度和高度，而<html>标签在脚本中表示为document.documentElement，可以这样设计：

     var w=document.documentElement.clientWidth; //返回值不包含滚动条的宽度var h=document.documentElement.clientHeight; //返回值不包含滚动条的宽度

不过在IE怪异模式下，body是最顶层的可视元素，而html元素保持隐藏。所以只有通过<body>标签的clientWidth和clientHeight属性才可以得到浏览器窗口的可视宽度和高度，而<body>标签在脚本中表示为document.body，所以如果要兼容IE怪异解析模式，则可以这样设计：

     var w=document.body.clientWidth;var h=document.body.clientHeight;

然而，支持DOM解析模式的浏览器都把body视为一个普通的块级元素，而<html>标签才包含整个浏览器窗口。因此，考虑到浏览器的兼容性，可以这样设计：

     var w=document.documentElement.clientWidth || document.body.clientWidth;var h=document.documentElement.clientHeight || document.body.clientHeight;

如果浏览器支持DOM标准，则使用documentElement对象读取；如果该对象不存在，则使用body对象读取。

【示例2】如果窗口包含内容超出了窗口可视区域，则应该使用scrollWidth和scrollHeight属性来获取窗口的实际宽度和高度。但是对于document.documentElement和document.body来说，不同浏览器对于它们的支持略有差异。

不同浏览器的返回值比较如表17-9所示。

表17-9　浏览器解析scrollWidth与clientWidth属性比较

通过表17-9返回值比较，可以看到不同浏览器对于使用documentElement对象获取浏览器窗口的实际尺寸是一致的，但是使用Body对象来获取对应尺寸就会存在很大的差异，特别是Firefox浏览器，它把scrollWidth与clientWidth属性值视为相等。

17.5　位移和定位

元素定位是动态网页设计的基础，用户通过访问和设置元素的CSS位置属性（left和top）可以模拟各种网页运动效果。

17.5.1　案例：获取窗口位置

CSS的left和top属性不能真实反映元素相对于页面或其他对象的精确位置，不过每个元素都拥有offsetLeft和offsetTop属性，它们描述了元素的偏移位置。但不同浏览器定义元素的偏移参照对象不同。例如，IE会以父元素为参照对象进行偏移，而支持DOM标准的浏览器会以最近定位元素为参照对象进行偏移。

【示例1】本示例是一个3层嵌套的结构，其中最外层div元素被定义为相对定位显示。然后在JavaScript脚本中使用alert(box.offsetLeft);语句获取最内层div元素的偏移位置，则IE返回值为50像素，而其他支持DOM标准的浏览器会返回101像素。注意，早期Opera返回值为121像素，因为它是以ID为wrap元素的边框外壁为起点进行计算，而其他支持DOM标准的浏览器以ID为wrap元素的边框内壁为起点进行计算。

呈现效果如图17-15所示。

图17-15　获取元素的位置示意图

所有浏览器都支持offsetParent属性，该属性总能指向定位元素。例如，针对上面的嵌套结构，有如下几种情况。

☑　对于IE浏览器来说，当前定位元素（ID为box的div元素）的offsetParent属性将指向ID为sub的div元素。对于sub元素来说，它的offsetParent属性将指向ID为wrap的div元素。

☑　对于支持DOM的浏览器来说，则当前定位元素的offsetParent属性将指向ID为wrap的div元素。

所以可以设计一个能够兼容不同浏览器的等式：

☑　IE：(#box).offsetLeft+(#sub).offsetLeft=(#box).offsetLeft+(#box).offsetParent.offsetLeft

☑　DOM：(#box).offsetLeft

对于任何浏览器来说，offsetParent属性总能够自动识别当前元素偏移的参照对象，所以不用担心offsetParent在不同浏览器中具体指代什么元素。这样就能够通过迭代来计算当前元素距离窗口左上顶角的坐标值，演示如图17-16所示。

图17-16　能够兼容不同浏览器的元素偏移位置计算演示示意图

通过图17-16可以看到，尽管不同浏览器的offsetParent属性指代的元素不同，但是通过迭代计算，当前元素距离浏览器窗口的坐标距离都是相同的。

【示例2】根据上面分析可以设计一个扩展函数：

由于body和html元素没有offsetParent属性，所以当迭代到body元素时，会自动停止并计算出当前元素距离窗口左上角的坐标距离。

提示：不要为包含元素定义边框，因为不同浏览器对边框的处理方式不同。例如，IE浏览器会忽略所有包含元素的边框，因为所有元素都是参照对象，且以参照对象的边框内壁作为边线进行计算。Firefox和Safari会把静态元素的边框作为实际距离进行计算，因为对于它们来说，静态元素不作为参照对象。而对于Opera浏览器来说，它根据非静态元素边框的外壁作为边线进行计算，所以该浏览器所获取的值又不同。如果不为所有包含元素定义边框，就可以避免不同浏览器解析的分歧，最终实现返回相同的距离。

17.5.2　案例：获取相对包含框的位置

在复杂的嵌套结构中，仅获取元素相对于浏览器窗口的位置并没有多大利用价值，因为定位元素是根据最近的上级非静态元素进行定位的。同时对于静态元素来说，它是根据父元素的位置来决定自己的显示位置。

要获取相对父级元素的位置，用户可以调用17.5.1节自定义的getPoint()扩展函数分别获取当前元素和父元素距离窗口的距离，然后求两个值的差即可。

【示例】为了提高执行效率，可以先判断offsetParent属性是否指向父级元素，如果是，则可以直接使用offsetLeft和offsetTop属性获取元素相对于父元素的距离；否则就调用getPoint()扩展函数分别获得当前元素和父元素距离窗口的坐标，然后求差即可。

下面调用该扩展函数获取指定元素相对父元素的偏移坐标：

17.5.3　案例：获取定位包含框的位置

定位包含框就是定位元素参照的包含框对象，一般为距离当前元素最近的上级定位元素。获取元素相对定位包含框的位置可以直接读取CSS样式中left和top属性值，它们记录了定位元素的坐标值。

【示例】扩展函数getB()调用了getStyle()扩展函数，该函数能够获取元素的CSS样式属性值。对于默认状态的定位元素或者静态元素，它们的left和top属性值一般为auto。因此，获取left和top属性值之后，可以尝试使用parseInt()方法把它转换为数值。如果失败，说明其值为auto，则设置为0，否则返回转换的数值。

17.5.4　案例：设置元素的偏移位置

与获取元素的位置相比，设置元素的偏移位置就比较容易，可以直接使用CSS属性进行设置。不过对于页面元素来说，只有定位元素才允许设置元素的位置。考虑到页面中定位元素的位置常用绝对定位方式，所以不妨把设置元素的位置封装到一个函数中。

【示例】下面函数能够根据指定元素，及其传递的坐标值，快速设置元素相对于上级定位元素的位置：

定位元素还可以使用right和bottom属性，但是我们更习惯使用left和top属性来定位元素的位置。所以在该函数中没有考虑right和bottom属性。

17.5.5　案例：设置元素的相对位置

偏移位置是重新定位元素的位置，不考虑元素可能存在的定位值。但是，在动画设计中，经常需要设置元素以当前位置为起点进行偏移。

【示例】定义一个扩展函数，以实现元素相对当前位置进行偏移。该函数中调用了17.5.3节介绍的getB()扩展函数，此函数能够获取当前元素的定位坐标值：

针对下面结构和样式，用户可以调用offsetP()函数设置ID为sub的div元素向右下方向偏移（10,100）的坐标距离。

17.5.6　案例：获取鼠标指针的页面位置

要获取鼠标指针的页面位置，首先应捕获当前事件对象，然后读取事件对象中包含的定位信息。考虑到浏览器的不兼容性，可以选用pageX/pageY（兼容Safari）或clientX/clientY（兼容IE）属性对。另外，还需要配合使用scrollLeft和scrollTop属性。

【示例】

pageX和pageY事件属性不被IE浏览器支持，而clientX和clientY事件属性又不被Safari浏览器支持，因此可以混合使用它们以兼容不同的浏览器。同时，对于IE怪异解析模式来说，body元素代表页面区域，而html元素被隐藏，但是支持DOM标准的浏览器认为html元素代表页面区域，而body元素仅是一个独立的页面元素，所以需要兼容这两种解析方式。

下面示例演示了如何调用上面已定义的扩展函数getMP()捕获当前鼠标指针在文档中的位置：

呈现效果如图17-17所示。

图17-17　鼠标指针在页面中的位置

17.5.7　案例：获取鼠标指针在元素内的位置

除了考虑鼠标的页面位置外，在开发中还应该考虑鼠标在当前元素内的位置。这需要用到事件对象的offsetX/offsetY或layerX/layerY属性对。由于早期Mozilla类型浏览器不支持offsetX和offsetY事件属性，可以考虑用layerX和layerY，但是这两个事件属性是以定位包含框为参照对象，而不是元素自身左上顶角，因此还需要减去当前元素的offsetLeft/offsetTop值。

【示例1】可以使用offsetLeft和offsetTop属性获取元素在定位包含框中的偏移坐标，然后使用layerX属性值减去offsetLeft属性值，使用layerY属性值减去offsetTopt属性值，即可得到鼠标指针在元素内部的位置：

在实践中上面扩展函数存在几个问题：

☑　为了兼容Mozilla类型浏览器，通过鼠标偏移坐标减去元素的偏移坐标，得到元素内鼠标偏移坐标的参考原点元素边框外壁的左上角。

☑　Safari浏览器的offsetX和offsetY是以元素边框外壁的左上角为坐标原点，而其他浏览器则是以元素边框内壁的左上角为坐标原点，这就导致不同浏览器的解析差异。

☑　考虑到边框对于鼠标位置的影响，当元素边框很宽时，必须考虑如何消除边框对于鼠标位置的影响。但是，由于边框样式不同，它存在3像素的默认宽度，则为获取元素的边框实际宽度带来了麻烦。需要设置更多的条件，来判断当前元素的边框宽度。

【示例2】完善后的获取鼠标指针在元素内的位置扩展函数如下：

呈现效果如图17-18所示。

图17-18　完善鼠标指针在元素内的定位

17.5.8　案例：获取页面滚动条的位置

【示例】对于浏览器窗口的滚动条来说，使用scrollLeft和scrollTop属性也可以获取窗口滚动条的位置。

17.5.9　案例：设置页面滚动条的位置

Window对象定义了scrollTo(x,y)方法，该方法能够根据传递的参数值定位滚动条的位置，其中参数x可以定位页面内容在x轴方向上的偏移量，而参数y可以定位页面在y轴方向上的偏移量。

【示例】下面扩展函数能够把滚动条定位到指定的元素位置。其中调用了17.5.1节中定义的getPoint()扩展函数，使用getPoint()函数获取指定元素的页面位置：

17.6　显示和隐藏

CSS使用visibility和display属性控制元素显示或隐藏。visibility和display属性各有优缺点，如果担心隐藏元素会破坏页面结构，破坏页面布局，可以选用visibility属性。visibility属性能够隐藏元素，但是它会留下一块空白区域，影响页面视觉效果，如果不考虑布局问题，则可以考虑使用display属性。

17.6.1　案例：可见性

简单的隐藏元素可以通过style.display属性来实现，虽然这种方法并不标准，但是却被普遍采用。

【示例1】本示例能够遍历结构中所有的p元素，并把class属性值不为main的段落文本全部隐藏：

恢复style.display属性的默认值，只需设置style.display属性值为空字符串（style.display =""）。

【示例2】由于显示和隐藏是交互设计中经常用到的技巧，所以有必要对其进行功能封装，以实现代码重用和灵活应用，并能够兼容不同浏览器。

当指定元素和布尔值参数时，则元素能够根据布尔值true或false决定是否进行显示或隐藏，如果不指定第二个布尔值参数，则函数将对元素进行显示或隐藏切换：

下面在页面中设置一个向右浮动的元素p。连续调用3次display()函数后，则相当于隐藏元素，代码如下：

不管元素是否显示或隐藏，如果按如下方式调用，则会显示出来，且元素依然显示为原来的状态：

     display(p , true);              //强制显示

17.6.2　案例：透明度

所有现代浏览器都支持元素的透明度，但是不同浏览器对于元素透明度的设置方法不同。IE浏览器支持filters滤镜集，而支持DOM标准的浏览器认可style.opacity属性。同时，它们设置值的范围也不同，IE的opacity属性值范围为0～100，其中0表示完全透明，而100表示不透明。而支持style.opacity属性浏览器的设置值范围是0～1，其中0表示完全透明，而1表示不透明。

【示例1】为了兼容不同浏览器，可以把设置元素透明度的功能进行函数封装：

在获取元素的透明度时，应注意在IE浏览器中不能够直接通过属性读取，而应借助filters集合的item()方法获取Alpha对象，然后读取它的opacity属性值。

【示例2】为了避免在读取IE浏览器中元素的透明度时发生错误，建议使用try语句包含读取语句。

17.7　设计动画

在JavaScript中设计动画，主要利用循环体和定时器（setTimeout和setInterval）来实现。动画设计思路：通过循环改变元素的某个CSS样式属性，从而达到动态效果，如移动位置、缩放大小、渐隐渐显等。为了能够设计更逼真的效果，一般通过高频率小步伐快速修改样式属性值，让浏览者感觉动画是在持续运动而不是由很多次设置组成。

17.7.1　定时器

动画的过程体现一种时间连续性，JavaScript主要通过setTimeout()和setInterval()方法实现。

1．setTimeout()方法

setTimeout()方法能够在指定的时间段后执行特定代码。其用法如下：

     var o=setTimeout(code, delay)

参数code表示要延迟执行的代码字符串，该字符串语句可以在window环境中执行，如果包含多个语句，应该使用分号进行分隔。delay表示延迟的时间，以毫秒为单位。返回一个延迟执行的代码控制句柄。如果把这个句柄传递给clearTimeout()方法，则会取消代码的延迟执行。

【示例1】本示例演示了当鼠标移过段落文本时，会延迟半秒钟弹出一个提示对话框，显示当前元素的名称。

setTimeout()方法的第一个参数虽然是字符串，但是也可以把JavaScript代码封装在一个函数体内，然后把函数引用作为参数传递给setTimeout()方法，等待延迟调用，这样就避免了传递字符串的疏漏和麻烦。

【示例2】本示例演示了如何为集合中每个元素都绑定一个事件延迟处理函数。

这样当鼠标移过每个body元素下子元素时，都会延迟半秒钟后弹出一个提示对话框，提示该元素的名称。

【示例3】可以利用clearTimeout()方法在特定条件下清除延迟处理代码。例如，当鼠标移过某个元素，并停留半秒钟之后，才会弹出提示信息，一旦鼠标移出当前元素，就立即清除前面定义的延迟处理函数，避免相互干扰。

setTimeout()方法只能够被执行一次，如果希望反复执行该方法中包含的代码，则应该在setTimeout()方法中包含对自身的调用，这样就可以把自己注册为可以反复被执行的方法。

【示例4】本示例会在页面内的文本框中按秒针速度显示递加的数字，当循环执行10次后，会调用clearTimeout()方法清除对代码的执行，并弹出提示信息。

2．setInterval()方法

使用setTimeout()方法模拟循环执行指定代码，不如直接调用setInterval()方法来实现。setInterval()方法能够周期性执行指定的代码，如果不加以处理，那么该方法将会被持续执行，直到浏览器窗口关闭，或者跳转到其他页面为止。其语法如下：

     var o=setInterval(code, interval)

该方法的用法与setTimeout()方法基本相同，其中参数code表示要周期执行的代码字符串，而interval参数表示周期执行的时间间隔，以毫秒为单位。该方法返回的值是一个Timer ID，这个ID编号指向对当前周期函数的执行引用，利用该值对计时器进行访问，如果把这个值传递给clearTimeout()方法，则会强制取消周期性执行的代码。

此外，setInterval()方法的第一个参数如果是一个函数，则setInterval()方法还可以跟随任意多个参数，这些参数将作为此函数的参数使用。格式如下：

     var o=setInterval(function, interval[,arg1, arg2,…,argn])

【示例5】针对上面示例，可以这样设计：

提示：setTimeout()和setInterval()方法在用法上有几分相似，不过两者的作用区别也很明显，setTimeout()方法主要用来延迟代码执行，而setInterval()方法主要实现周期性执行代码。在动画设计中，setTimeout()方法适合在不确定的时间内持续执行某个动作，而setInterval()方法适合在有限的时间内执行可以确定起点和终点的动画。

如果同时做周期性动作，setTimeout()方法不会每隔几秒钟就执行一次函数，如果函数执行需要1秒钟，而延迟时间为1秒钟，则整个函数应该是每2秒钟才执行一次。而setInterval()方法却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。

17.7.2　案例：滑动

滑动效果主要通过动态修改元素的坐标来实现。设计的关键有以下两点。

☑　应考虑元素的初始化坐标、最终坐标，以及移动坐标等定位要素。如果参照物相同，则这个问题比较好解决，读者可以参阅17.5节讲解的技巧获取元素的坐标值。

☑　移动的速度、频率等问题。移动可以借助定时器来实现，但效果的模拟涉及算法问题，不同的算法，可能会设计出不同的移动效果，如匀速运动、加速和减速运动。在Flash动画设计中，就专门提供了一个Tween类，利用它可以模拟出很多运动效果，如缓动、弹簧震动等效果，其技术核心是算法设计问题。算法好像很高深，如果通俗一点讲，就是通过数学函数计算定时器每次触发时移动的距离。

【示例】本示例演示了如何设计一个简单的元素滑动效果。通过指向元素、移动的位置，以及移动的步数，可以设计按一定的速度把元素从当前位置移动指定的位置。本示例引用前面介绍的getB()方法，该方法能够获取当前元素的绝对定位坐标值。

使用时应该定义元素绝对定位或相对定位显示状态，否则移动无效。在网页动画设计中，一般都使用这种定位移动的方式来实现。

17.7.3　案例：渐隐渐显

渐隐渐显效果主要通过动态修改元素的透明度来实现。

【示例】本示例演示了如何实现一个简单的渐隐渐显动画效果，涉及setOpacity()函数的调用。

下面调用该函数：