通过js获取css属性

最新推荐文章于 2024-04-28 18:53:16 发布

在白云寺外期待

最新推荐文章于 2024-04-28 18:53:16 发布

阅读量5.2k

点赞数

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

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

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

在白云寺外期待

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过js获取css属性

1、通过dom.style.属性来获取但是这种方法无法获取id、class里的属性例子:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #c1
复制链接

扫一扫