JS利用DOM获取或设置元素的样式

最新推荐文章于 2024-08-02 08:30:00 发布

原创最新推荐文章于 2024-08-02 08:30:00 发布 · 4.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何使用DOM操作浏览器中的样式，包括行内样式、内部样式和外部样式表。重点讲解了在不同浏览器环境下获取样式的方法及其兼容性写法，并演示了通过JavaScript更改元素样式的实践。

1．利用DOM操作行内样式表

1）属性值的获取：元素节点.style.属性名，注意如果是类似于font-size这种属性，需要改为fontSize写法

2）属性值的设置：元素节点.style.属性名 = “值”

2.利用DOM操作内部样式表或外部样式表

1）IE浏览器下：元素节点.currentStyle

2）谷歌或火狐下：window.getComputedStyle(元素节点，null);

3）兼容写法

格式1：var sty = 元素节点.currentStyle==undefined ? window.getComputedStyle(元素节点，null) : 元素节点.currentStyle

格式2：var sty = 元素节点.currentStyle|| window.getComputedStyle(元素节点,null);

4）注意：外部样式或行内样式在JS下面是无法更改的，如果要更改，可以使用添加行内样式的形式更改，即元素节点.style.属性名 = 属性值；

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background: blue;
		}
	</style>
</head>
<body>
	<div></div>
	<script type="text/javascript">
	var div = document.querySelector("div");
	console.log(div.style.width);  //什么也没有
	var sty = div.currentStyle || window.getComputedStyle(div,null);
	console.log(sty.width);   //100px;
	</script>
</body>
</html>

标签