通过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‘。