js怎么获取指定css属性的值?

js怎么获取指定css属性的值?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

js怎么获取指定css属性的值?

1、通过dom.style.属性 来获取

但是这种方法无法获取id、class里的属性

例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#c1
			{
				background-color: red;
				color: black;
			}
		</style>
	</head>
	<body>
		<h1 id="c1" >ss</h1>
		<h2 id="c2" style="background-color: red;" >222</h2>
		<script>
			
			var dom = document.getElementById("c1");
			var dom2 = document.getElementById("c2");
			console.log(dom.style.backgroundColor);//为空
			console.log(dom2.style.backgroundColor);
			//输出red,如果style中的颜色用rgba形式表示,输出的也是rgba形式
			
</script>
	</body>
</html>

2、在IE中用的是dom.currentStyle,标准下用的是dom.getComputedStyle

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#c1
			{
				background-color: #FF0000;
				color: white;
			}
		</style>
	</head>
	<body>
		<h1 id="c1" >ss</h1>
		<script>
			var dom = document.getElementById("c1");
			if(window.getComputedStyle)//判断是否存在getComputedStyle方法
			{
			var str = document.defaultView.getComputedStyle(dom,null).color;
			console.log(str);
			}
			else if(dom.currentStyle)//兼容低版本ie
			{
				console.log("***");
				console.log("ie版本 "+dom.currentStyle.color);
			}
 
			
</script>
	</body>
</html>

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是js怎么获取指定css属性的值?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读