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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第五章,JavaScript与样式表,本章案例,遍历页面的样式个数,为样式表添加和删除规则,本章目标,掌握样式表常用属性,掌握,JavaScript,操作样式表的方法,预习检查,提问,如何获取某个组件的,style,属性？,如何使用,JavaScript,为一个组件设置高度？,Javascript与CSS样式表,JavaScript与CSS之间的交互是现代JavaScript编程的支柱之一，运用某种形式的动态交互几乎是现代所有web应用的必备条件。由此带来的好处是，页面加载事件更短，用户能够快速的使用。,CSS是产生可用的、引人注目的web页面的事实标准。结合JavaScript的能力，可以构建强有力的界面，包括动画、小物件和动态显示等效果。,JavaScript获取样式表对象,浏览器提供了与样式表进行交互的接口在 JavaScript 代码中可以通过 document.styleSheets.来访问页面上所应用的所有样式表列表，包括通过 link 元素引用的外部样式表，以及位于 style 元素之内的内部样式表。,table,border:1px solid#abcdef;,var sheets=document.styleSheets0;,使用,document.styleSheets,索引,属性获取指定样式表对象,动态创建样式表,document.createElement(),：此函数可以在动态创建一个元素节点，如：,document.createElement(div);,document.createElement(table);,可以使用此函数在页面上动态添加一个样式表：,var sheet=,document.createElement(style);,sheet.innerHTML,=div border:2px solid black;background-color:blue;,document.body.appendChild(sheet);,动态创建一个,style,元素节点,使用,innerHTML,属性为此节点增加内部,html,内容,div.,将动态创建的,style,节点增加到,body,标签中,样式表属性,样式表对象的获取方式：,使用,document.getElementById();,.,var style=document.getElementById(mystyle);,使用,document.styleSheets,索引,;,.,var style=document.styleSheets1/,获得第二个,style,对象,使用,title,属性,.,function getStyleSheet(unique_title),for(var i=0;idocument.styleSheets.length;i+),var sheet=document.styleSheetsi;,if(sheet.title=unique_title),return sheet;,样式表属性,使用,disabled,属性控制样式表对象,使用,disabled,属性可以灵活切换当前站点使用的样式表，实现整站样式的自由选择。,可在网络环境不同的情况下选择不同的样式，如,google,邮箱的精简模式及,QQ,空间的精简模式。,function disableSheet(),document.getElementById(disable_example),.disabled=true;,function enableSheet(),document.getElementById(disable_example),.disabled=false;,禁用指定样式表，此样式表下所有样式无效,启用指定样式表，此样式表下所有样式有效,课堂练习,为页面上的文字“羌笛何须怨杨柳，春风不度玉门关。”设置任意两种样式，点击按钮时对样式进行切换。,增加和删除样式,页面有两组标签包含的文字及一个列表，两个按钮。动态为页面列表增加一个新的样式，点击按钮时，页面标签内的文字变为红色，同时为列表增加一行。,分析,需获取当前页面样式表对象，如果不存在，则需创建一个新的样式表对象。,向当前样式表对象中插入一个新的样式规则(指定位置)。,移除新插入的新样式规则。,分别为两个按钮绑定单击事件。,增加和删除样式,当前CSS样式如下：,.not-applied-class1 border:2px solid black;,.not-applied-class2 font-size:15px;,.not-applied-class3 background-color:blue;,.not-applied-class4 margin:10px;,增加和删除样式,var rule_sheet=getStyleSheet();,function changeText(),if(!e3_style_on),rule_sheet.insertRule(p color:red;,2);,e3_style_on=true;,在索引为,2,的位置插入新规则,function resetText(),if(e3_style_on),rule_sheet.deleteRule(2);,e3_style_on=false;,移除新插入的规则,点击,changeText,按钮,演示程序示例,3.html,课堂练习,点击页面按钮，为当前样式表增加新的样式规则。,代码如下：,table,border:2px solid#abcdef;,增加的规则如下：,width:200px;height:400px;,改变元素样式,如何改变指定元素的样式？,通过,DOM,可以访问描述某元素的样式的,style,对象。,style,对象被定义为,CSSStyleDeclaration,。如：,var el=document.getElementById(id);,el.style.color=red;,通过,setAttribute(key,value),来为一个元素设置样式。如：,el.setAttribute(style,color:red);,注意：使用,setAttribut,(),方法设置样式时会删除此元素之前所有的样式。,改变元素样式,在,CSS,样式中，很多样式都带有连字符，如：,font-size,、,font-color,等等，在,style,对象中设置这些属性时，大多数情况下去掉连字符，采用骆驼命名法即可。可以如下设置：,var el=document.getElementById(id);,el.style.color=red;,el.style.fontSize=15px;,el.style.backgroundColor=#FFFFFF;,在使用,CSSStyleDeclaration,即,style,对象设置样式时，只有该规则的样式高于其他相同规则时才会有效，否则没有任何效果。,总结,setAttribute 和通过 CSSStyleDeclaration 对象来设置样式之间的区别是什么？,列出两种方式，说明该怎样实现这样的效果：当用户点击一个按钮时，所有的图像都出现绿色的边框。,改变某个元素的 CSSStyleDeclaration 对象总是会引起该元素样式的改变吗？为什么？,举出两种方式，说明如何访问某个特定的样式表。,Thank You!,