JavaScript中获取样式值的方法总结

最新推荐文章于 2021-12-08 00:00:37 发布

My_Bells

最新推荐文章于 2021-12-08 00:00:37 发布

阅读量594

点赞数

分类专栏： JavaScript 文章标签： css

本文链接：https://blog.csdn.net/qwe435541908/article/details/77140684

版权

JavaScript 专栏收录该内容

46 篇文章 4 订阅

订阅专栏

本人经过整理总结出以下获取样式值的方法，如有错误请各位大佬指正。
有四种方法：style，currentStyle，getComputedStyle，rules 与 cssRules方法。

style

用法：document.getElementById(“id”).style.property=“值”。
例子：

	<style>
.yellow{height:200px;width:200px;background: yellow;}
	</style>
</head>
<body>
<div id="div1" class="yellow" style="color:red"></div>
<script>
var div1=document.getElementById("div1");
div1.onclick=long;
function long(){
	 alert(div1.style.width);//空值
	 alert(div1.style.color);//red
	 div1.style.color="blue";
	 div1.style.width="300px";
	 alert(div1.style.color);//blue
	 alert(div1.style.width);//300px
}
</script>

总结：style对象只能读写内联样式的值，不能够读写内部样式和外部样式的值。经过测试兼容IE8，Chrome，Firefox浏览器。

2.currentStyle

用法：document.getElementById(“id”).currentStyle.property。

	<style>
.yellow{height:200px;width:200px;background: yellow;}
	</style>
</head>
<body>
<div id="div1" class="yellow"></div>
<script>
var div1=document.getElementById("div1");
div1.onclick=long;
function long(){
//div1.currentStyle.width="300px";//Uncaught TypeError: Cannot set property 'width' of undefined
alert(div1.currentStyle.width);//200px
}
</script>

总结：currenStyle只能读取元素最终用到的样式值，不能用来设置相关值。经过测试只对IE8浏览器兼容，Chrome和Firefox，Safari不兼容。

3.getComputedStyle

用法：window.getComputedStyle(元素).property

	<style>
.yellow{height:200px;width:200px;background: yellow;}
	</style>
</head>
<body>
<div id="div1" class="yellow"></div>
<script>
var div1=document.getElementById("div1");
div1.onclick=long;
function long(){
//window.getComputedStyle(div1).width="300px";// Failed to set the 'width' property on 'CSSStyleDeclaration'
alert(window.getComputedStyle(div1).width);//200px
}
</script>

总结：getComputedStyle只能读取元素最终用到的样式值，不能用来设置相关值。经过测试对Chrome和Firefox，Safari兼容，对IE8浏览器不兼容。

4.rules 与 cssRules方法

用法：document.styleSheets[0].rules[0];
document.styleSheets[0].cssRules[0];

	<style>
.yellow{height:200px;width:200px;background: yellow;}
#div1{height:300px;}
	</style>

</head>
<body>
<div id="div1" class="yellow"></div>
<script>
var div1=document.getElementById("div1");
div1.onclick=long;
function long(){
	if(document.styleSheets[0].rules){//兼容IE8，Chrome，不兼容Firefox
		var s1=document.styleSheets[0].rules[0];
		var s2=document.styleSheets[0].rules[1];
		alert(s1.style.background);//yellow
		alert(s2.style.background);//空值
		s1.style.background="red";//.yellow中背景色设为红色
		s2.style.background="blue";//#div1中背景色设为蓝色，最终根据css就近规则显示蓝色
		alert(s1.style.background);//red
		alert(s2.style.background);//blue
	}else{//兼容Firefox，Chrome，不兼容IE8
		var s1=document.styleSheets[0].cssRules[0];
		var s2=document.styleSheets[0].cssRules[1];
		alert(s1.style.height);//200px
		alert(s2.style.height);//300px
		s1.style.height="400px";
		s2.style.height="600px";
		alert(s1.style.height);//400px
		alert(s2.style.height);//600px
		}
}
</script>