第五章 JavaScript和 与样式表 JavaScript及网页特效制作课件.pptVIP

第五章 JavaScript与样式表 本章案例 遍历页面的样式个数 为样式表添加和删除规则 本章目标 掌握样式表常用属性 掌握JavaScript操作样式表的方法 预习检查 如何获取某个组件的style属性？ 如何使用JavaScript为一个组件设置高度？ 访问样式信息 每个window对象都有Document属性，该属性表示在窗口中显示的HTML文档的Document对象。Document对象可能是客户端JavaScript中最常用的对象。 动态创建样式表 document.createElement()：此函数可以在动态创建一个元素节点，如： document.createElement(‘div’); document.createElement(‘table’); 可以使用此函数在页面上动态添加一个样式表： 动态创建一个style元素节点 style/style 使用innerHTML属性为此节点增加内部html内容 stylediv{…..}/style 将动态创建的style节点增加到body标签中 课堂练习 动态一个样式表，插入html文档head部分，修改页面背景颜色。 样式表属性 样式表对象的获取方式： 使用document.getElementById(); style id=“mystyle”…../style var style = document.getElementById(‘mystyle’); 使用document.styleSheets[索引]; style id=“style1”……../style style id=“style2”……../style var style = document.styleSheets[1] //获得第二个style对象 使用title属性 style title=“mystyle”…../style function getStyleSheet(unique_title) { for(var i=0; idocument.styleSheets.length; i++) { var sheet = document.styleSheets[i]; if(sheet.title == unique_title) { return sheet; } } } 样式表属性 使用disabled属性控制样式表对象 使用disabled属性可以灵活切换当前站点使用的样式表，实现整站样式的自由选择。 可在网络环境不同的情况下选择不同的样式，如google邮箱的精简模式及QQ空间的精简模式。 禁用指定样式表，此样式表下所有样式无效 启用指定样式表，此样式表下所有样式有效 样式表属性 CSS样式如下： 点击enableSheet按钮 演示程序示例2.html 课堂练习 为页面上的文字“羌笛何须怨杨柳，春风不度玉门关。”设置任意两种样式，点击按钮时对样式进行切换。 增加和删除样式 样式表对象提供了两个方法可以用来对样式表对象中的样式进行添加和删除： insertRule：在指定位置增加一个新的样式规则。 stylesheet.insertRule(rule,index); deleteRule：删除一个指定的样式规则。 stylesheet.deleteRule(index); 增加和删除样式 页面有两组P标签包含的文字及一个ol列表，两个按钮。动态为页面列表增加一个新的样式，点击按钮时，页面p标签内的文字变为红色，同时为列表增加一行。 需获取当前页面样式表对象，如果不存在，则需创建一个新的样式表对象。 向当前样式表对象中插入一个新的样式规则(指定位置)。 移除新插入的新样式规则。 分别为两个按钮绑定单击事件。 增加和删除样式 当前CSS样式如下： 增加和删除样式 JS脚本如下： 遍历页面所有样式表对象 定位指定的样式对象 增加和删除样式 在索引为2的位置插入新规则 移除新插入的规则 点击changeText按钮 演示程序示例3.html 课堂练习 点击页面按钮，为当前样式表增加新的样式规则。 代码如下： style title=“mystyle” table { border : 2px solid #abcdef; } /style 增加的规则如下： width : 200px;height:400px; 改变元素样式 如何改变指定元素的样式？ 通过 DOM 可以访问描述某元素的样式的style对象。style 对象被定义为 CSSStyleDeclaration。如： var el = document.getElementById(id); el.style.color = red; 通过setAttr