如何获取非行间样式

最新推荐文章于 2022-10-24 06:30:00 发布

athrunzero

最新推荐文章于 2022-10-24 06:30:00 发布

阅读量817

点赞数

分类专栏： javascript 文章标签： div javascript xhtml

本文链接：https://blog.csdn.net/yjzhu1987/article/details/7915500

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

我们知道可以通过 obj.style.display = 'block' 来控制块级元素的显示和隐藏，当然 style 还有许多的属性比如width，height等等。但是style只能控制行间样式即<div style="width:100px"></div>这种，而一般我们的样式都写在某个样式表中style.css，这时候 style 就获取不了属性值，只能改变属性值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>test</title>
	<style type="text/css">
	#div1{width:100px;background:red;}
	#div2{width:100px;height:100px;background:blue;}
	</style>
</head>
<body>
	<div id="div1" style="height:100px;"></div><br />
	<div id="div2"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	alert(oDiv1.style.height);	//100px
	alert(oDiv2.style.height);	//空
}
</script>

那么我们改如何获取到非行间样式呢？答案是currentStyle

从字面上的意思就是获取当前的样式，不过我觉得获取计算后的样式更妥当些，为什么？后面会讲到。我们先看下currentStyle如何使用，上面的代码稍作修改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>test</title>
	<style type="text/css">
	#div1{width:100px;background:red;}
	#div2{width:100px;height:100px;background:blue;}
	</style>
</head>
<body>
	<div id="div1" style="height:100px;"></div><br />
	<div id="div2"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	alert(oDiv1.style.height);	//100px
	alert(oDiv2.currentStyle.height);	//100px
}
</script>

这样就解决了非行间样式的获取，不过这里有个BUG。还是上面的代码在火狐和谷歌下面获取不到值，甚至在谷歌下面报错。这是因为 currentStyle 只有 ie 浏览器识别，火狐谷歌都不识别，但是却识别 getComputedStyle 得到计算后的样式，这也是前面我所说的为什么将它取名为获取计算后的样式的原因。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>test</title>
	<style type="text/css">
	#div1{width:100px;background:red;}
	#div2{width:100px;height:100px;background:blue;}
	</style>
</head>
<body>
	<div id="div1" style="height:100px;"></div><br />
	<div id="div2"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	alert(oDiv1.style.height);	//100px
	alert(getComputedStyle(oDiv2).height);	//100px
}
</script>

最后为了兼容所有的浏览器，把获取样式写成函数封装起来，重新命名为 getStyle。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>test</title>
	<style type="text/css">
	#div1{width:100px;background:red;}
	#div2{width:100px;height:100px;background:blue;}
	</style>
</head>
<body>
	<div id="div1" style="height:100px;"></div><br />
	<div id="div2"></div>
</body>
</html>
<script type="text/javascript">
//获取非行间样式
function getStyle(obj, attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];	//for ie
	} else {
		return getComputedStyle(obj)[attr];	//for firefox
	}
};
window.onload = function(){
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	alert(getStyle(oDiv2, 'height'));	//100px
}
</script>

PS：建议把这个函数收入到常用函数中，方便以后调用。

PS2：博客搬家了，以后不再 CSDN 更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/

athrunzero

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何获取非行间样式

我们知道可以通过 obj.style.display = 'block' 来控制块级元素的显示和隐藏，当然 style 还有许多的属性比如width，height等等。但是style只能控制行间样式即这种，而一般我们的样式都写在某个样式表中style.css，这时候 style 就获取不了属性值，只能改变属性值。 test #div1{width:100px;backg
复制链接

扫一扫