style、currentStyle、getComputeStylel的使用

(1)js中使用obj.style的用法,是为了获得内联样式,即style属性中的值。

如果想获取obj.style.display,但内联样式表中没有定义display,那么将返回一个空的字符串。

(2)使用obj.currentStyle则是为了获得外部(即通过<link>引入)和内部(即<style>中定义)的样式表中的值。

currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:内嵌样式、样式表规则、HTML 标签属性、HTML 标签的内部定义。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             #text{
 8                 width: 200px;
 9                 height: 30px;
10             }
11         </style> 
12         <script type="text/javascript">
13             function objClick(obj){
14                 alert(obj.style.width);
15                 alert(obj.currentStyle.height);
16             }
17         </script>
18     </head>
19     <body>
20         <div>
21             <input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">
22         </div>
23     </body>
24 </html>

注意:只有 IE 和 Opera 支持使用 currentStyle 获取 HTMLElement 的计算后的样式,其他浏览器中不支持。ps:由于忽略了这个条件,一直在chrome下调试,怎么都不起作用,所以浏览器的兼容性,一定要切记。

(3)window.getComputedStyle(obj,null)
Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表,以数组形式返回,并且是readonly的。
参数说明:
第一个参数为要获取计算后的样式的目标元素
第二个参数为期望的伪元素,如 ':after',':first-letter' 等,而不是伪类如 ':hover' 等。
注意:在 Firefox 中,第二个参数是必须的,如果没有期望的伪元素要设置为 'null',这与规范的要求相符。在 Chrome Safari Opera 中,第二个参数如果为 'null' 则可以省略。
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             #text{
 8                 width: 200px;
 9                 height: 30px;
10             }
11         </style> 
12         <script type="text/javascript">
13             function objClick(obj){
14                           alert(window.getComputedStyle(obj,null).getPropertyValue("width"));
15                           alert(window.getComputedStyle(obj,null).getPropertyCSSValue("width").cssText);
16                }
17         </script>
18     </head>
19     <body>
20         <div>
21             <input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">
22         </div>
23     </body>
24 </html>

 经测试:第一种方法,在IE和chrome中通用,第二种,IE下不支持。

 

posted @ 2014-09-10 10:39  春眠不觉晓  阅读(771)  评论(0编辑  收藏  举报