获得实际作用在元素身上的样式

时间：6年前阅读：5285

直接代码演示，最终效果点运行代码看：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#hd{    
				width: 500px;    
				height: 300px;    
				background: olive;    
				margin: 50px auto;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){    
				var hd = document.getElementById('hd');    
//				alert(hd.style.width);   这亲是获取不了的，因为下面body id里面没有设置    
//				这个写法有两种浏览器,先判断浏览器(这种写法可以不管是行内样式,还是嵌入样式,引入导入样式通通可以能获得最终的样式(这里例如写一个宽度))    
				if (document.all) {//IE    
					var w = hd.currentStyle.width;    
//					background比较特殊,这样写是获得不了背景颜色的    
//					var w = hd.currentStyle.background;    
//					要这样写,才能获得背景颜色 下面的W3C标准的那个会以rgb()形式体现出来的    
//					var w = hd.currentStyle.backgroundColor;    
				} else{//W3C标准浏览器    
//					(hd,mull)括号里有两个参数,第一个是你要获得谁的样式'hd',第二个是'null'我也不知道是什么意思,反正要写    
					var w = getComputedStyle(hd,null).width;    
//					background比较特殊,这样写是获得不了背景颜色的    
//					var w = getComputedStyle(hd,null).background;    
//					同上    
//					var w = getComputedStyle(hd,null).backgroundColor;    
				}    
				alert(w);    
			}    
		</script>    
	</head>    
	<body>    
		<div id="hd"></div>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

获得实际作用在元素身上的样式

网友评论