主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] 样式表是通过CSSStyleSheet类型来表示的。CSSStyleSheet类型比较通用,它只表示样式表,而不会管这些样式表在HTML中是如何定义的。CSSStyleSheet对象则是一套只读的接口。...
样式表是通过CSSStyleSheet类型来表示的。它包括通过 使用下面的方法可以检测浏览器是否支持DOM2级样式表: var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets","2.0"); CSSStyleSheet继承自StyleSheet。StyleSheet可以作为一个基础接口来定义非CSS样式表。从StyleSheet接口继承下来的属性有:
以上的属性除了
应用于文档的所有样式表都是通过 var styleSheet = null; for(var i = 0,len = document.styleSheets.length; i < len; i++){ styleSheet = document.styleSheets[i]; console.info(styleSheet.href); } 得到的结果如下图所示: 上面的代码会输出每一个样式表的 不同的浏览器的 我们还可以直接通过 function getStyleSheet(element){ return element.sheet || element.styleSheet; } //获取第一个<link>元素引入的样式表 var link = document.getElementsByTagName("link")[0]; var sheet = getStyleSheet(link);
上面的这些属性中最常用的有三个:
在多数情况下,我们使用 div.box{ background-color:#f00; width:100px; height:120px; } 假设这条规则位于页面中的第一个样式表中,而这个样式表中只用这一条规则。那么通过下面的代码就可以获取这条规则的所有信息: var sheet = document.styleSheets[0]; //获取规则列表 var rules = sheet.cssRules || sheet.rules; //取得第一条规则 var rule = rules[0]; console.info(rule.selectorText); //"div.box" console.info(rule.style.cssText); //完整的css代码 console.info(rule.style.backgroundColor); //rgb(255,0,0) console.info(rule.style.width); //"100px" console.info(rule.style.height); //"120px" 通过上面的方式,我们就可以确定与规则相关的样式信息。我们也可以通过这种方式来修改样式信息,例如下面的代码: var sheet = document.styleSheets[0]; var rules = sheet.cssRules || sheet.rules; var rule = rules[0]; rule.style.backgroundColor = "#0f0"; 通过这种方式修改的规则会影响页面中使用该规则的所有元素。 DOM规定要向现有的样式表中添加规则需要使用 sheet.insertRule("body{background-colo:#f2f2f2}",0); //DOM中的方法 在上面的例子中向样式表中插入了一条规则,修改页面的背景颜色。插入的规则将成为样式表的第一条规则(插入到0位置)。注意:规则的次序在确定层叠之后应用到文档的规则是非常重要的。FireFox、Chrome、Safari和Opera浏览器都支持 在IE中有一个类似的方法—— sheet.addRule("body{background-colo:#f2f2f2}",0); //IE中的方法 使用 为了统一所有的浏览器的向样式表中插入规则的方法,可以自定义一个通用插入规则函数,这个函数接收4个参数:要向其中添加规则的样式表和与 function insertRule(sheet,selectorText,cssText,position){ if(sheet.insertRule){ sheet.insertRule(selectorText+ "{" + cssText + "}",position); }else if(sheet.addRule){ sheet.addRule(selectorText,cssText,position); } } 调用上面函数的方法为: insertRule(document.styleSheets[0],"body","background-color:#99ce7e",0); 上面的调用代码在样式表的第一个位置插入一条规则,修改页面的body颜色为浅绿色。 如果需要从样式表中删除规则可以调用 sheet.deleteRule(0); //DOM方法 在IE浏览器中支持的删除规则的方法是 sheet.removeRule(0); //IE的方法 下面是一个跨浏览器删除样式表规则的函数。该函数接收2个参数:要操作的样式表和要删除的规则的索引。 function deleteRule(sheet,index){ if(sheet.deleteRule){ sheet.deleteRule(index); }else if(sheet.removeRule){ sheet.removeRule(index); } } 调用上面函数的方法为: deleteRule(document.styleSheets[0],0); 删除规则可能会影响到CSS的重叠效果,实际使用中应该谨慎使用。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com