第17章 脚本化CSS

第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) ,]*”就表示鼠标指针样式可以自定义多个外部图标，或者也可以不定义。

☑　使用“+”加号表示前面的值或值组可以出现一次或多次。例如，“font-family:[[ family-name | serif | sans-serif | monospace | cursive | fantasy ],]+”就表示font-family属性值必须设置一个值，当然也可以设置多个值。

☑　使用“?”问号表示前面的项目是可选的，可以出现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属性值。