JavaScript控制页面样式

《JavaScript控制页面样式》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章JavaScript控制页面样式本章将介绍如何在网页中使用JavaScript控制页面呈现的样式，在阅读本章之前读者应当具备一定的CSS基础知识，本章第1节也将对CSS的基础知识进行简要介绍。第2节则对样式编程的相关知识进行讲解，最后结合多个应用示例，说明样式编程在Web开发中的具体应用。本章是本书中关于DOM部分的最后一章，因此将有相当一部分示例对第7章和第8章介绍的DOM基础和事件的知识进行综合运用。CSS基础9.1样式编程基础9.2样式编程示例9.39.1CSS基础CSS的全称是CascadingStyleS

2、heets，中文名称为层叠样式表。它是W3C组织定义和维护的标准，其目的是为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。CSS有多种版本（Level），了解要使用的CSS版本是很重要的。CSS1在1996年成为推荐标准，包括字体、颜色等基本属性，CSS2在其基础上新增了浮动、定位等高级概念，以及更高级的选择器。目前CSS的最新版本是CSS2.1，为W3C的候选推荐标准，下一版本CSS3仍然在开发过程中。在实际应用中使用CSS必须考虑到各种操作系统、各种浏览器及其版本对CSS支持程度的差异。网页

3、的读者和作者都可以使用CSS来控制文件的颜色、字体、排版等显示特性。CSS将网页的结构与呈现分隔开来，它带来了许多好处：（1）页面代码的可读性增强；（2）页面代码结构更加灵活；（3）作者和读者都可以控制网页的显示样式；（4）代码文件的组织结构简化。CSS由多个样式规则组成，以下是一个简单的样式规则定义：p{color:red;background:white;}每一条个样式规则具有3个必备的要素：（1）选择器：它决定了哪些页面元素受到样式规则的影响，如前面样式规则中的p，它表示样式规则将对页面中所有的

元素起作用；（

4、2）样式属性：如color，background；（3）样式值：如red，white。样式属性和样式值是成对出现的，它们指定了元素的呈现样式。前面的样式规则所表达的含义就是：页面中所有的

元素，其背景色为白色，前景色为红色。9.1.1选择器1．常用选择器最常用的选择器包括是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，例如：p{color:red;background:white;}/*段落元素

*/a{font-family:Verdana;color:Aqua;}/*链接或锚*/在类型选择器

5、中只需指定希望应用样式的元素名称。类型选择器又叫做为元素选择器或简单选择器。后代选择器可用来寻找特定元素或元素组的后代。后代选择器由多个选择器构成，之间用空格分隔。类型选择器和后代选择器通常用于定义一般性样式，使页面内的同类型元素具有相同的呈现风格。如果希望对特定的元素指定样式，可以使用ID选择器或类选择器。另一种常用的选择器是伪类，通常用于链接进行动态样式设置。2．高级选择器（1）通用选择器通用选择器可能是所有选择器中最强大而使用频率却是最低的。（2）子选择器子选择器与后代选择器比较类似，不同之处在于：后代选择器选择一

6、个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。图9-1子选择器输出结果（3）相邻同胞选择器如果希望根据一个元素与另一个元素的相邻关系对它应用样式，则可以使用相邻同胞选择器。图9-2相邻同胞选择器输出结果（4）属性选择器属性选择器可以根据某个属性是否存在或属性的值来寻找元素，它能够实现一些非常有趣的效果。9.1.2层叠与特殊性在同一个页面上应用多个样式规则，那么就有可能有两个或者更多的样式规则应用与同一个元素，那么就需要一种机制来决定这些样式规则的优先级。这种机制在CSS中称作层叠（Cascade），它为每个

7、样式分配了一个重要度。作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。因此，层叠采用以下的重要度次序：（1）标为!important的用户样式；（2）标为!important的作者样式；（3）作者样式；（4）用户样式；（5）浏览器/用户代理应用的样式。然后，根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有

8、比较一般的选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。选择器的特殊性分为4个等级，由高到低分别为：（1）行内样式；（2）ID选择器；（3）类、伪类和属性选择器；（4）类型选择器和伪元素选择器。选择器特殊性比较的规则是：从等级最高的选择器开始，比较它们包含该等级选择器的数量，数量多的特殊性高，如果该等