获取元素的style属性-阿里云开发者社区

获取元素的style属性

2016-05-10 1845

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

r如何获取元素的style属性呢?

一般我们想到的方法是使用obj.style

例如

   Html代码  
    
  
<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:

   Js代码  
    
document.getElementById("overflow").style

但是发现没有获取到style!!!这时我们就非常纳闷了,我确实在外部css文件中编写了overflow的样式啊,怎么获取不到呢?

注意:obj.style获取的只是元素的内联样式,如果没有设置,返回空.

以下方法是获取元素最终的css样式(计算后的css样式)

   Html代码  
    
  
<!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.

那我们换一种方式:

   Js代码  
    
  
window.onload=function()  
{  
    var para=document.getElementsByTagName('p')[0];  
    var currentStyle=getStyle2(para);  
    alert("'"+currentStyle["color"]+"' \t\t   '"+currentStyle["margin-top"]+"'");  
}  