r如何获取元素的style属性呢?
一般我们想到的方法是使用obj.style
例如
- <nav>
- <div id="overflow" >
- <div class="container">
- <a href="index.asp">Home1</a>
- <a href="html5_meter.asp">Previous2</a>
- <a href="html5_noscript.asp">栏目3</a>
- <a href="html5_noscript.asp">栏目4</a>
- <a href="html5_noscript.asp">栏目5</a>
- <a href="html5_noscript.asp">栏目6</a>
- </div>
- </div>
- </nav>
我们使用js:
- document.getElementById("overflow").style
但是发现没有获取到style!!!这时我们就非常纳闷了,我确实在外部css文件中编写了overflow的样式啊,怎么获取不到呢?
注意:obj.style获取的只是元素的内联样式,如果没有设置,返回空.
以下方法是获取元素最终的css样式(计算后的css样式)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
- <script type="text/javascript">
- function getStyle2(obj)
- {
- if(obj.currentStyle===undefined)
- {
- return getComputedStyle(obj);
- }else{
- return obj.currentStyle;//IE
- }
- }
- window.onload=function()
- {
- var para=document.getElementsByTagName('p')[0];
- var currentStyle=getStyle2(para);
- alert("'"+currentStyle["color"]+"' \t\t '"+currentStyle["margin"]+"'");
- }
- </script>
- <style>
- p{
- margin:30px;
- }
- </style>
- </head>
- <body>
- <p style="color:red;" >
- 这是一个段落.
- </p>
- </body>
- </html>
运行结果:
IE9中:
IE8中:
可见IE8和IE9的反应是相同的.
火狐中:
chrome中:
我们发现火狐中获取不到margin属性.但是在IE和chrome中都可以获取到margin.
那我们换一种方式:
- window.onload=function()
- {
- var para=document.getElementsByTagName('p')[0];
- var currentStyle=getStyle2(para);
- alert("'"+currentStyle["color"]+"' \t\t '"+currentStyle["margin-top"]+"'");
- }
在火狐中运行结果:
可以获取到margin-top,但是不能获取到margin.我猜测,火狐同样也可以获取到margin-left,margin-right,margin-bottom.经过我的验证,确实可以.
我进一步推理:如果我单单设置了padding,在火狐中就必须通过padding-left,padding-right,padding-top或padding-bottom来获取了.
总结:
(1)使用obj.style不能获取元素的最终样式;
(2)在chrome和火狐中返回的颜色是rgb模式,而在IE中返回的颜色是单词(例如"red");
(3)在火狐中无法获取"margin"或"padding",必须通过margin-[方位]或padding-[方位]的方式来获取.
参考:http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
http://segmentfault.com/blog/kidsamong/1190000002545307
