JavaScript控制页面样式.ppt
第9章 JavaScript控制页面样式,本章将介绍如何在网页中使用JavaScript控制页面呈现的样式，在阅读本章之前读者应当具备一定的CSS基础知识，本章第1节也将对CSS的基础知识进行简要介绍。第2节则对样式编程的相关知识进行讲解，最后结合多个应用示例，说明样式编程在Web开发中的具体应用。本章是本书中关于DOM部分的最后一章，因此将有相当一部分示例对第7章和第8章介绍的DOM基础和事件的知识进行综合运用。,9.1 CSS基础,CSS的全称是Cascading Style Sheets，中文名称为层叠样式表。它是W3C组织定义和维护的标准，其目的是为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。CSS有多种版本（Level），了解要使用的CSS版本是很重要的。,CSS 1在1996年成为推荐标准，包括字体、颜色等基本属性，CSS 2在其基础上新增了浮动、定位等高级概念，以及更高级的选择器。目前CSS的最新版本是CSS 2.1，为W3C的候选推荐标准，下一版本CSS 3仍然在开发过程中。在实际应用中使用CSS必须考虑到各种操作系统、各种浏览器及其版本对CSS支持程度的差异。,网页的读者和作者都可以使用CSS来控制文件的颜色、字体、排版等显示特性。CSS将网页的结构与呈现分隔开来，它带来了许多好处：（1）页面代码的可读性增强；（2）页面代码结构更加灵活；（3）作者和读者都可以控制网页的显示样式；（4）代码文件的组织结构简化。,CSS由多个样式规则组成，以下是一个简单的样式规则定义：p color:red;background:white;每一条个样式规则具有3个必备的要素：（1）选择器：它决定了哪些页面元素受到样式规则的影响，如前面样式规则中的p，它表示样式规则将对页面中所有的元素起作用；（2）样式属性：如color，background；（3）样式值：如red，white。,样式属性和样式值是成对出现的，它们指定了元素的呈现样式。前面的样式规则所表达的含义就是：页面中所有的元素，其背景色为白色，前景色为红色。,9.1.1 选择器,1常用选择器 最常用的选择器包括是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，例如：p color:red;background:white;/*段落元素*/a font-family:Verdana;color:Aqua;/*链接或锚*/,在类型选择器中只需指定希望应用样式的元素名称。类型选择器又叫做为元素选择器或简单选择器。后代选择器可用来寻找特定元素或元素组的后代。后代选择器由多个选择器构成，之间用空格分隔。,类型选择器和后代选择器通常用于定义一般性样式，使页面内的同类型元素具有相同的呈现风格。如果希望对特定的元素指定样式，可以使用ID选择器或类选择器。另一种常用的选择器是伪类，通常用于链接进行动态样式设置。,2高级选择器,（1）通用选择器 通用选择器可能是所有选择器中最强大而使用频率却是最低的。（2）子选择器 子选择器与后代选择器比较类似，不同之处在于：后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。,图9-1 子选择器输出结果,（3）相邻同胞选择器,如果希望根据一个元素与另一个元素的相邻关系对它应用样式，则可以使用相邻同胞选择器。,图9-2 相邻同胞选择器输出结果,（4）属性选择器,属性选择器可以根据某个属性是否存在或属性的值来寻找元素，它能够实现一些非常有趣的效果。,9.1.2 层叠与特殊性,在同一个页面上应用多个样式规则，那么就有可能有两个或者更多的样式规则应用与同一个元素，那么就需要一种机制来决定这些样式规则的优先级。这种机制在CSS中称作层叠（Cascade），它为每个样式分配了一个重要度。作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。,因此，层叠采用以下的重要度次序：（1）标为!important的用户样式；（2）标为!important的作者样式；（3）作者样式；（4）用户样式；（5）浏览器/用户代理应用的样式。,然后，根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有比较一般的选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。选择器的特殊性分为4个等级，由高到低分别为：（1）行内样式；（2）ID选择器；（3）类、伪类和属性选择器；（4）类型选择器和伪元素选择器。,选择器特殊性比较的规则是：从等级最高的选择器开始，比较它们包含该等级选择器的数量，数量多的特殊性高，如果该等级选择器的个数相同，则比较下一等级的选择器数量。如果4个等级的选择器数量完全相等，则后定义的选择器优先。,9.1.3 继承,应用样式的元素的后代会继承样式的某些属性，比如颜色或字号。继承是CSS中非常有用的概念，它使开发人员不必在元素的每个后代上添加相同的样式。恰当地使用继承可以减少代码中选择器的数量和复杂性。,9.1.4 CSS小结,选择器、层叠和继承是CSS中最基础的概念，只有理解了这些概念才能确定页面元素应用哪些样式属性以及它们的来源。在这些概念的基础上，CSS的应用就是各类样式属性的使用问题，关于具体样式属性的使用，读者可以查阅相关文档，本书限于篇幅不作具体讲解。,9.2 样式编程基础,9.2.1 访问样式1内联样式 在样式编程中最常用的对象是style，当我们使用内联方式指定元素的样式时，style对象的属性包含了所有的样式属性。,使用style对象需要注意几个问题。（1）样式设置必须符合CSS规范，否则该样式会被忽略。（2）如果样式属性名称中不带“-”号，例如color，直接使用style.color即可获得该属性值；如果样式属性名称中带有“-”号，例如font-size，对应的style对象属性名称为fontSize。,（3）如果需要访问float样式属性，不能使用style.float，因为float是JavaScript的保留字，不能用作属性名称，应该使用style.cssFloat访问该样式属性。（4）使用style对象获取的属性与元素最终显示效果并不一定相同，因为除了内联样式声明之外，还可以通过元素以及链接样式表的方式改变元素的显示效果。,在网页中除了使用内联方式设置CSS样式之外，还可以通过其他方式（例如元素等）将所有CSS规则和内联样式综合在一起得到元素的最终样式。在IE和DOM兼容浏览器中获取最终样式的方式是不同的。（1）IE：使用元素的currentStyle属性即可获取最终样式；（2）DOM兼容浏览器：使用方法获取最终样式。,【例9-1】style.css【例9-2】style.html（HTML部分）【例9-3】style.html（JavaScript部分）,9.2.2 访问样式表,1修改CSS规则 通过document.styleSheets可以访问当前页面中所有的样式表，对样式表中某些CSS规则的修改，可以改变所有应用了该CSS规则的元素，从而实现对元素样式的“批量”修改。在某个样式表中，CSS规则的集合对象是rules（IE）或者cssRules（DOM）属性。【例9-4】style2.html（HTML部分）,【例9-5】style2.html（JavaScript部分）,（a）修改CSS规则之前（b）修改CSS规则之后图9-3 修改CSS规则,2切换样式表,在某些情况下，仅仅修改一条CSS规则不能满足应用的需求，比如很多网站提供的“换肤”功能，在不同的显示风格之间进行切换时，需要同时修改多条CSS规则。网站通常会将与某一种风格相关的所有CSS规则保存在一个单独的CSS文件中，通过元素链接到HTML页面。例9-6所示的页面中包含了两个CSS文件的链接。,【例9-6】style3.html【例9-7】style1.css【例9-8】style2.css,图9-4 选择样式表,（a）白色风格（b）灰色风格图9-5 切换样式表,9.3 样式编程示例,CSS使HTML页面的表现力得到大大增强，而JavaScript的动态编程特性与CSS相结合，使得Web开发人员可以自由地操纵页面及其元素的显示风格。,使用JavaScript进行样式编程的主要目的是改善Web应用的交互界面，使用户在访问站点时更加轻松愉快，当然要实现这一目标通常需要用户界面设计师或者交互设计师的参与，本书更多的是考虑如何使用JavaScript实现一个已有的设计方案。下面是一些在网站设计中经常会用到的示例，读者可以根据实际应用的需要进行选用或者改造。,9.3.1 网页换肤,网页换肤的核心思想就是切换样式表。使用该方法实现网页换肤的前提是采用符合Web标准的页面设计方式，将显示样式尽可能地分离到单独的CSS文件中。,1通用的样式表切换功能,在节中，我们通过id属性直接选择相应的元素。如果我们需要为网页添加一组新的样式，必须修改相关的JavaScript代码。图9-4中Mozilla Firefox浏览器选择样式表的方式给了我们一些启发，通过JavaScript也可以在页面中实现类似的样式表选择功能，并且该功能是跨浏览器的。首先编写测试页面的HTML代码，如例9-9所示。,【例9-9】stylesheet.html（HTML部分）,（a）选择样式风格（b）换肤后的网页效果图9-6 网页换肤,2使用Cookie保存用户选择的样式表,为了保存用户选定的样式风格，我们需要将相应的信息保存在客户端Cookie中。基本思路是通过setActiveStyleSheet函数将样式风格信息保存在Cookie中，然后在init函数增加相关的代码，读取Cookie并且将页面的显示风格设置为Cookie中保存的样式风格。首先给出保存、读取Cookie的公用函数。,3解决IE中可能出现的样式切换不渲染问题,通过样式表的切换进行网页换肤时，浏览器会将当前页面的内容重新进行渲染，从而使页面的显示风格发生变化。然而，在Internet Explorer浏览器中可能会出现页面不重新渲染的情况，这是Internet Explorer在实现样式切换时存在的一个缺陷。以下提供一些小技巧，通过它们可以强制浏览器进行页面渲染。,（1）设置元素的zoom样式属性。（2）设置元素的display样式属性也可以起到同样的效果。,9.3.2 图片倒影特效,1倒影特效的实现,图9-7 图片倒影特效,实现图片倒影的基本思路如下：（1）在图片下方添加一个元素，作为放置图片倒影的容器；（2）在容器中加入若干个高度为1px的元素，其中含有一个与原图相同的元素，设置该元素margin-top样式属性，使其显示原图中某个高度位置的局部内容；（3）设置倒影中每一个1px高的元素的opacity样式（不透明度）属性，从而实现倒影部分的渐变效果。【例9-10】img_reflector.html（HTML部分）,2倒影特效的改进,图9-8 CSS滤镜示例效果,【例9-11】改进后的AddReflection函数,9.3.3 圆角边框,为了使页面显得更加友好，圆角边框在各类网站中应用得十分广泛。CSS 1/2的盒模型中元素边框都是矩形，CSS 3开始支持圆角边框，但是目前主流浏览器对CSS 3的支持程度较低。很多网页设计师采取圆角的背景图片来模拟圆角边框的效果，但是这种方式显然不是一个通用的解决方案，因为如果元素的背景色发生变化，圆角背景图标也必须相应替换，特别是对于动态网页而言，这种方式存在着局限性。,1基于CSS的圆角边框,（a）选择样式风格（b）换肤后的网页效果图9-9 CSS圆角边框实现原理,【例9-12】roundcorner.html,图9-10 基于CSS的圆角边框,2使用JavaScript动态添加圆角边框,【例9-13】公用函数【例9-14】创建b1b5元素的JavaScript脚本【例9-15】创建圆角的上下部分【例9-16】创建圆角函数AddRCById【例9-17】roundcorner2.html,图9-11 使用JavaScript动态添加圆角边框,小 结,使用JavaScript进行样式编程可以在很大程度上弥补静态CSS在进行页面渲染时存在的局限性，改善Web应用的用户体验，提高其易用性。样式编程的技术可以分为对样式和样式表的访问两大部分，当然最常用的仍然是直接对样式对象style的操作。,在实际应用的过程中，要求开发人员对CSS的使用比较熟悉，本章示例的实现过程也印证了这一点。另外，由于不同浏览器中样式对象和对CSS支持程度的差异，代码的浏览器兼容性是样式编程中必须考虑的问题。,
