获取元素的style属性

hw1287789687

浏览: 5208198 次
性别:
来自: 北京

最近访客更多访客>>

DOCDOC

rbaggio10

zcm1205

morelily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css
javascript

获取style 获取样式最终样式样式叠加 currentStyle

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.经过我的验证,确实可以.