有效样式

追梦小少年呀

于 2019-02-11 16:16:28 发布

阅读量283

点赞数 2

CC 4.0 BY-SA版权

文章标签： js 小白

本文链接：https://blog.youkuaiyun.com/sajasjsaj/article/details/87003800

本文介绍了一种在网页中获取元素当前实际应用样式的JavaScript方法，包括行内样式和外部样式表定义的样式。通过使用currentStyle和getComputedStyle函数，可以确保在不同浏览器下都能正确获取到元素的高度、宽度和背景颜色等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取当前有效样式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			div{height: 200px; background-color: red}
			#div1{width: 300px; background-color: orange}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");

				/*alert(oDiv.style.width);
				alert(oDiv.style.height);
				alert(oDiv.style.backgroundColor);*/

				//上述方式只能获取行间的css样式。
				
				/*
					获取当前有效样式
					elem.currentStyle? elem.currentStyle[attr];
				 */
				// alert(oDiv.currentStyle["height"]);
				// alert(getComputedStyle(oDiv)["height"]);
				// alert(getStyle(oDiv, "backgroundColor"));

				//设置样式，设置在行间
				oDiv.style.backgroundColor = "blue";
			}
			//浏览器兼容
			function getStyle(node, styleAttr){
				if(node.currentStyle){
					return node.currentStyle[styleAttr];
				}else{
					return getComputedStyle(node)[styleAttr];
				}
			}
		</script>
	</head>
	<body>
		<div id = "div1" style = "width: 100px"></div>
	</body>
</html>