Question

我的问题很简短.javasript是否会覆盖内联样式吗？此外，我知道它会覆盖任何特定级别的css样式，但是即使添加！important标志，javascript仍然能够覆盖css吗？

Answer 1

Mozilla指出以下内容：

HTMLElement.style属性用于获取以及设置元素的内联样式。

是的，它的确覆盖了内联样式。在检查DOM时，您会发现自己。

如下面的代码片段所示，由于您覆盖了内联CSS，因此Javascript胜过了内联CSS。内联CSS胜过CSS，因为它是最具体的。

但是!important标志将否决没有重要标志的更具体的CSS规则。

document.querySelector('#javascript').style.backgroundColor = 'orange';
document.querySelector('#important').style.backgroundColor = 'lightblue';

div {
  background-color: pink;
}

div#important {
  background-color: yellow !important;
}

<div id="javascript" style="background-color: lightgreen;">javascript</div>
<div id="inline" style="background-color: lightgreen;">inline</div>
<div id="css">css</div>
<div id="important" style="background-color: lightgreen;">important!</div>

注意： !important标志应尽可能避免。大多数情况下，会有更好的解决方案。您为什么考虑使用它？

Answer 2

Element.prototype.style会覆盖该元素的内联样式（style属性），是的，它的确可以覆盖任何级别的CSS样式（<style>块内的CSS）。

但是，!important标志的优先级高于内联样式。

Javascript VS CSS特异性vs内联样式

2 个答案: