通过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‘。
原文地址：https://www.cnblogs.com/-beyond/p/8502578.html