第九章JavaScript控制页面样式

1、JavaScript程序设计教程软件学院软件学院 胡胡 沛沛 2016年年11月月第九章第九章 JavaScript控制页面样式控制页面样式 CSS基础基础9.1 样式编程基础样式编程基础9.2 样式编程示例样式编程示例9.3n9.1 CSS基础基础nCSS（Cascading Style Sheets）层叠样式表。n它是W3C组织定义和维护的标准，其目的是为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。n可以使用CSS来控制文件的颜色、字体、排版等显示特性。nCSS将网页的结构与呈现分隔开来，它带来了许多好处：n（1）页面代码的可读性增强；n（2）页面代码结构更加灵

2、活；n（3）作者和读者都可以控制网页的显示样式；n（4）代码文件的组织结构简化。n每一条样式规则具有3个必备的要素：n（1）选择器：它决定了哪些页面元素受到样式规则的影响。n（2）样式属性：如color，background；n（3）样式值：如red，white。n样式属性和样式值是成对出现的，它们指定了元素的呈现样式。np color: red; background: white; n这条样式规则所表达的含义就是：页面中所有的元素，其背景色为白色，前景色为红色。n9.1.1 选择器选择器n1常用选择器常用选择器n（1）类型选择器）类型选择器n类型选择器用来寻找特定类型的元素，例如：np c

3、olor: red; background: white; /* 段落元素 */na font-family: Verdana; color: Aqua; /* 链接或锚 */n在类型选择器中只需指定希望应用样式的元素名称。类型选择器又叫做为元素选择器或简单选择器。n（2）后代选择器后代选择器n后代选择器可用来寻找特定元素或元素组的后代。后代选择器由多个选择器构成，之间用空格分隔。 ndiv pbackgroud:yellown其中的“div p就是关联选择器，它表示div中的标签对的背景为黄色，而其它地方出现的标签对则不受影响。n（3）class选择器选择器nclass属性用来定义一组有共同

4、功能或格式的HTML元素。n要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值。nparagraph1nparagraph2nparagraph3n（4）ID选择器选择器nID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值，ID selector就是为样式规则定义语句选择具有某一ID属性值的HTML元素。ntext herenn#yellowonecolor:yellownn（5）伪元素选择器）伪元素选择器n伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。n如：对于超链

5、接的正常状态，访问过的状态，选中状态、光标移动到超链接文本上的状态；段落的首字母和首行，都可以使用伪元素选择器来定义。nHTML元素:伪元素属性:值nA:active属性:值 选中超链接时的状态nA:hover属性:值 标移动到超链接上的状态nA:link属性:值 超链接时的正常状态nA:visited属性:值 访问过超链接时的正常状态n（6）组合选择器）组合选择器n为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号隔开。nH1,H2,H3,TDcolor:red;n2 2高级选择器高级选择器n（1 1）通用选择器）通用选择器n通用选择器可能是所有选择

6、器中最强大而使用频率却是最低的。 n* margin:0 0 0 0; color: black;（2 2）子选择器）子选择器n子选择器与后代选择器比较类似，不同之处在于：后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。nul li background-color : red; n（3）相邻同胞选择器）相邻同胞选择器n如果希望根据一个元素与另一个元素的相邻关系对它应用样式，则可以使用相邻同胞选择器。nh1 + p font-style : italic;n（4）属性选择器）属性选择器n属性选择器可以根据某个属性是否存在或属性的值来寻找元素，它能够实现一些非常有趣的

7、效果。 ndivtitle border-bottom-style : dashed;ndivtitle:hover cusor:help;n9.1.2 继承继承n应用样式的元素的后代会继承样式的某些属性，比如颜色或字号。 n继承是CSS中非常有用的概念，它使开发人员不必在元素的每个后代上添加相同的样式。n恰当地使用继承可以减少代码中选择器的数量和复杂性。n9.1.3 层叠与特殊性层叠与特殊性n在同一个页面上应用多个样式规则，那么就有可能有两个或者更多的样式规则应用与同一个元素，那么就需要一种机制来决定这些样式规则的优先级。n这种机制在CSS中称作层叠（Cascade），它为每个样式分配了一个

8、重要度。作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。n可以通过!important来提高CSS规则的重要度，让它 优 先 于 任 何 规 则 ， 甚 至 优 先 于 作 者 加上!important标志的规则。n层叠采用以下的重要度次序：n（1）标为!important的用户样式；n（2）标为!important的作者样式；n（3）作者样式；n（4）用户样式；n（5）浏览器/用户代理应用的样式。n选择器的特殊性分为4个等级，由高到低分别为：n（1）行内样式；n（2）ID选择器；n（3）类、伪类和属性选择器；n（4）类型选择器和伪元素选择器。n如果两

9、个规则的特殊性相同，那么后定义的规则优先。n9.2 样式编程基础样式编程基础n9.2.1 访问样式访问样式n1内联样式内联样式n直接设置HTML中style属性。n需要在页面加上如下内容nn使用style对象需要注意几个问题:n（1）样式设置必须符合CSS规范，否则该样式会被忽略。n（2）如果样式属性名称中不带“-”号，例如color，直接使用style.color即可获得该属性值；如果样式属性名称中带有“-”号，例如font-size，对应的style对象属性名称为fontSize。（3）如果需要访问float样式属性，不能使用style.float，因为float是JavaScript的保

10、留字，不能用作属性名称，应该使用style.cssFloat访问该样式属性。（4）使用style对象获取的属性与元素最终显示效果并不一定相同，因为除了内联样式声明之外，还可以通过元素以及链接样式表的方式改变元素的显示效果。 在网页中除了使用内联方式设置CSS样式之外，还可以通过其他方式（例如元素等）将所有CSS规则和内联样式综合在一起得到元素的最终样式。 在IE和DOM兼容浏览器中获取最终样式的方式是不同的：（1）IE：使用元素的currentStyle属性即可获取最终样式；（2）DOM兼容浏览器：使用document.defaultView.getComputeStyle方法获取最终样式。n

11、2. 嵌入样式表嵌入样式表n /media 设置在哪些媒介上才起作用npFONT-SIZE:20pt;COLOR:blue;FONT-FAMILY:宋体nn3. 外部样式表外部样式表n将定制的样式规则放到一个专门的外部文件当中。n扩展名一般为.css，通过HTML文件link标签链接过来。nn一个样式表可以用到多个HTML页面中。n9.2.2 访问样式表n通过document.styleSheets可以访问当前页面中所有的样式表，对样式表中某些CSS规则的修改，可以改变所有应用了该CSS规则的元素，从而实现对元素样式的“批量”修改。n在某个样式表中，CSS规则的集合对象是rules（IE）或者cssRules（DOM）属性。n9.3 样式编程示例样式编程示例n nCSS使HTML页面的表现力得到大大增强，而JavaScript的动态编程特性与CSS相结合，使得Web开发人员可以自由地操纵页面及其元素的显示风格。小小 结结n使用JavaScript进行样式编程可以在很大程度上弥补静态CSS在进行页面渲染时存在的局限性，改善Web应用的用户体验，提高其易用性。n样式编程的技术可以分为对样式和样式表的访问两大部分，当然最常用的仍然是直接对样式对象style的操作。n实验实验n1. 实验名称：页面风格切换。实验名称：页面风格切换。n2. 实验目的：掌握用区域、