通过js获取css属性

最新推荐文章于 2024-09-09 09:52:03 发布

在白云寺外期待

最新推荐文章于 2024-09-09 09:52:03 发布

阅读量5.2k

点赞数

分类专栏：前端文章标签： CSS

本文链接：https://blog.csdn.net/lirunhui6/article/details/83108180

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了两种在JavaScript中获取元素CSS样式的有效方法：使用`dom.style`直接获取内联样式，以及利用`getComputedStyle`或`currentStyle`兼容不同浏览器获取更全面的样式信息，包括继承和计算后的样式。

摘要由CSDN通过智能技术生成

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>