首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式
阅读:15
JS currentStyle属性和getComputedStyle()方法:读取CSS显示样式
CSS 样式具有重叠特性,因此定义的样式与最终显示的样式并非并非完全相同。DOM 定义了一个方法帮助用户快速检测当前对象的显示样式,不过 IE 和标准 DOM 之间实现的方法不同。
【示例1】为类样式 blue 增加一个背景色为白色的声明,然后把该类样式应用到段落文本中。
这时可以使用 currentStyle 对象获取当前 p 元素的最终显示样式。
【示例2】使用 currentStyle 获取当前段落标签 <p> 的最终显示样式。
【示例3】针对上面示例,伪类能够兼容非 IE 浏览器,下面对页面脚本进行修改。使用 if 语句判断当前浏览器是否支持 document.defaultView,如果支持则进一步判断是否支持 document.defaultView.getComputedStyle,如果支持则使用 getComputedStyle() 方法读取最终显示样式;否则,判断当前浏览器是否支持 currentStyle,如果支持则使用它读取最终的显示样式。
IE 浏览器
IE 使用 currentStyle 对象读取元素的最终显示样式,是只读对象。currentStyle 对象包含元素的 style 属性,以及浏览器预定义的默认 style 属性。【示例1】为类样式 blue 增加一个背景色为白色的声明,然后把该类样式应用到段落文本中。
<style type="text/css"> #box { color:green; } .red { color:red; } .blue { color:blue; background-color:#FFFFFF; } </style> <script> window.onload = function(){ var styleSheets = document.styleSheets[0]; //获取样式表引用 var index = styleSheets.length; //获取样式表中包含样式的个数 if(styleSheets.insertRule){ //判断浏览器是否支持insertRule()方法 //使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式,设置段落背景色为红色,字体颜色为白色,补白为一个字体大小。插入位置在样式表的末尾, styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index); }else{ //如果哦浏览器不支持insertRule()方法 styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index); } } </script> <p class="blue">在样式表中增加样式操作</p>在浏览器中预览,会发现脚本中使用 insertRule()(或 addRule())方法添加的样式无效,效果如图所示。
这时可以使用 currentStyle 对象获取当前 p 元素的最终显示样式。
【示例2】使用 currentStyle 获取当前段落标签 <p> 的最终显示样式。
<script> window.onload = function(){ var styleSheets = document.styleSheets[0]; //获取样式表引用指针 var index = styleSheets.length; //获取样式表中包含样式的个数 if(styleSheets.insertRule){ //判断浏览器是否支持 styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index); }else{ styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index); } var p = document.getElementsByTagName("p")[0]; p.innerHTML = "背 景 色:"+p.currentStyle.backgroundColor+"<br>字体颜色:"+p.currentStyle.color; } </script>在上面代码中,首先使用 getElementsByTagName() 方法获取段落文本的引用,然后调用该对象的 currentStyle 子对象,并获取指定属性的对应值。通过这种方式,会发现 insertRule()(或 addRule())方法添加的样式被 blue 类样式覆盖,这是因为类选择符的优先级大于标签选择符的样式。
非 IE 浏览器
DOM 使用 getComputedStyle() 方法获取目标对象的显示样式,但是它属于 document.defaultView 对象。getComputedStyle() 方法包含两个参数:第 1 个参数表示元素,用来获取样式的对象;第 2 个参数表示伪类字符串,定义显示位置,一般可以省略或者设置为 null。【示例3】针对上面示例,伪类能够兼容非 IE 浏览器,下面对页面脚本进行修改。使用 if 语句判断当前浏览器是否支持 document.defaultView,如果支持则进一步判断是否支持 document.defaultView.getComputedStyle,如果支持则使用 getComputedStyle() 方法读取最终显示样式;否则,判断当前浏览器是否支持 currentStyle,如果支持则使用它读取最终的显示样式。
<style type="text/css"> #box { color:green; } .red { color:red; } .blue {color:blue; background-color:#FFFFFF;} </style> <script> window.onload = function(){ var styleSheets = document.styleSheets[0]; //获取样式表引用指针 var index = styleSheets.length; //获取样式表中包含样式的个数 if(styleSheets.insertRule){ //判断浏览器是否支持 styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index); }else{ styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index); } var p = document.getElementsByTagName("p")[0]; if( window.getComputedStyle) p.innerHTML = "背 景 色:"+window.getComputedStyle(p,null).backgroundColor+"<br>字体颜色:"+window.getComputedStyle(p,null).color; else if( p.currentStyle) p.innerHTML = "背 景 色:"+p.currentStyle.backgroundColor+"<br>字体颜色:"+p.currentStyle.color; else p.innerHTML = "当前浏览器无法获取最终显示样式"; } </script> </head> <body> <p class="blue">在样式表中增加样式操作</p>保存页面,在浏览器中显示,效果如图所示。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频