JavaScript修改DOM节点时，样式优先级的问题

　　通过element.style.xxx设置或者读取的xxx样式属性，都是属于行间样式（<p style="color=red"></p>)，并不是使用link的外部css文件或者在<style></style>标签中定义的样式

　　样式优先级： * < tagName < class < id < 行间(行间样式就是写在标签内）

　　下面这个代码中

<html>

<head>

	<style>

		#div1{ width:100px; height:100px; border:1px solid blue;}

		.red{ background-color: red }

	</style>

</head>

<body>

	<div id="div1"></div>

	<button onclick="changeToRed()">变红</button>

	<button onclick="changeToYellow()">变黄</button>

</body>

<script>

	function changeToRed(){

		var div1 = document.getElementById("div1");

		div1.className = "red";

	}

	function changeToYellow(){

		var div1 = document.getElementById("div1");

		div1.style.backgroundColor = "yellow";

	}

</script>

</html>

观察div的状态变化：

　　初始状态为 <div id="div1"></div> 此时div内部为白色；

　　先点击变红之后，变为 <div id="div1" class="red"></div> 此时div内部为红色；

　　再点击变黄，变为 <div id="div1" class="red" style="background-color: yellow;"></div>，此时div内部颜色变为黄色，此时黄色为行间样式，会覆盖掉通过class或者id设置的同一个属性（background-color)样式。

刷新浏览器，改变顺序：　

　　初始状态为 <div id="div1"></div> 此时div内部为白色；

　　先点击变黄，变为 <div id="div1" style="background-color: yellow;"></div>，此时div内部颜色变为黄色，此时黄色为行间样式

　　再点击变黄之后，变为 <div id="div1" style="background-color: yellow;" class="red"></div> 此时div内部为仍为黄色，这是因为后添加的class属性优先级没有上一步添加的行间属性的优先级高，所以不起作用。

建议：

　　如果出现这种情况，非常头疼，因为不报错，所以很难查找　

　　所以，尽量对同一个元素，更改样式属性的时候，只是用一种方法，要么只使用element.style.xxx，要么只是用element.className='xxx'。

巴特西

JavaScript修改DOM节点时，样式优先级的问题

最新文章

热门文章