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節點時，樣式優先級的問題