Javascript程序设计教程第9章 JavaScript控制页面样式.pptVIP

【例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．通用的样式表切换功能 在9.2.2节中，我们通过id属性直接选择相应的link元素。 如果我们需要为网页添加一组新的样式，必须修改相关的JavaScript代码。 图9-4中Mozilla Firefox浏览器选择样式表的方式给了我们一些启发，通过JavaScript也可以在页面中实现类似的样式表选择功能，并且该功能是跨浏览器的。 首先编写测试页面的HTML代码，如例9-9所示。 【例9-9】 stylesheet.html（HTML部分） （a）选择样式风格 （b）换肤后的网页效果 图9-6 网页换肤 第9章 JavaScript控制页面样式  本章将介绍如何在网页中使用JavaScript控制页面呈现的样式，在阅读本章之前读者应当具备一定的CSS基础知识，本章第1节也将对CSS的基础知识进行简要介绍。 第2节则对样式编程的相关知识进行讲解，最后结合多个应用示例，说明样式编程在Web开发中的具体应用。 本章是本书中关于DOM部分的最后一章，因此将有相当一部分示例对第7章和第8章介绍的DOM基础和事件的知识进行综合运用。 CSS基础 9.1 样式编程基础 9.2 样式编程示例 9.3 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，它表示样式规则将对页面中所有的p元素起作用； （2）样式属性：如color，background； （3）样式值：如red，white。 样式属性和样式值是成对出现的，它们指定了元素的呈现样式。 前面的样式规则所表达的含义就是：页面中所有的p元素，其背景色为白色，前景色为红色。 9.1.1 选择器 1．常用选择器 最常用的选择器包括是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，例如： p