首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式

JS currentStyle属性和getComputedStyle()方法：读取CSS显示样式

CSS 样式具有重叠特性，因此定义的样式与最终显示的样式并非并非完全相同。DOM 定义了一个方法帮助用户快速检测当前对象的显示样式，不过 IE 和标准 DOM 之间实现的方法不同。

IE 浏览器

IE 使用 currentStyle 对象读取元素的最终显示样式，是只读对象。currentStyle 对象包含元素的 style 属性，以及浏览器预定义的默认 style 属性。

【示例1】为类样式 blue 增加一个背景色为白色的声明，然后把该类样式应用到段落文本中。 
  1. <style type="text/css">
  2.     #box { color:green; }
  3.     .red { color:red; }
  4.     .blue {
  5.         color:blue;
  6.         background-color:#FFFFFF;
  7.     }
  8. </style>
  9. <script>
  10.     window.onload = function(){
  11.         var styleSheets = document.styleSheets[0];  //获取样式表引用
  12.         var index = styleSheets.length;  //获取样式表中包含样式的个数
  13.         if(styleSheets.insertRule){  //判断浏览器是否支持insertRule()方法
  14.             //使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式，设置段落背景色为红色，字体颜色为白色，补白为一个字体大小。插入位置在样式表的末尾，
  15.             styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
  16.         }else{  //如果哦浏览器不支持insertRule()方法
  17.             styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
  18.         }
  19.     }
  20. </script>
  21. <p class="blue">在样式表中增加样式操作</p>
在浏览器中预览，会发现脚本中使用 insertRule()（或 addRule()）方法添加的样式无效，效果如图所示。


这时可以使用 currentStyle 对象获取当前 p 元素的最终显示样式。

【示例2】使用 currentStyle 获取当前段落标签 <p> 的最终显示样式。 
  1. <script>
  2.     window.onload = function(){
  3.         var styleSheets = document.styleSheets[0];   //获取样式表引用指针
  4.         var index = styleSheets.length;      //获取样式表中包含样式的个数
  5.         if(styleSheets.insertRule){       //判断浏览器是否支持
  6.             styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
  7.         }else{
  8.             styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
  9.         }
  10.         var p = document.getElementsByTagName("p")[0];
  11.         p.innerHTML =  "背 景 色："+p.currentStyle.backgroundColor+"<br>字体颜色："+p.currentStyle.color;
  12.     }
  13. </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，如果支持则使用它读取最终的显示样式。 
  1. <style type="text/css">
  2.     #box { color:green; }
  3.     .red { color:red; }
  4.     .blue {color:blue; background-color:#FFFFFF;}
  5. </style>
  6. <script>
  7.     window.onload = function(){
  8.         var styleSheets = document.styleSheets[0];   //获取样式表引用指针
  9.         var index = styleSheets.length;      //获取样式表中包含样式的个数
  10.         if(styleSheets.insertRule){       //判断浏览器是否支持
  11.             styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
  12.         }else{
  13.             styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
  14.         }
  15.         var p = document.getElementsByTagName("p")[0];
  16.         if( window.getComputedStyle)
  17.             p.innerHTML =  "背 景 色："+window.getComputedStyle(p,null).backgroundColor+"<br>字体颜色："+window.getComputedStyle(p,null).color;
  18.         else if( p.currentStyle)
  19.             p.innerHTML =  "背 景 色："+p.currentStyle.backgroundColor+"<br>字体颜色："+p.currentStyle.color;
  20.         else
  21.             p.innerHTML =  "当前浏览器无法获取最终显示样式";
  22.     }
  23. </script>
  24. </head>
  25. <body>
  26. <p class="blue">在样式表中增加样式操作</p>
保存页面，在浏览器中显示，效果如图所示。

所有教程

优秀文章