javascript - 在 JavaScript 中使用 CSS !important

Question

<div id="testDiv">
  <h2 class="example">A heading with class="example"</h2>
  <p class="example">A paragraph with class="example".</p>
</div>

<button onclick="myFunction()">Try it</button>

<style>
  .example {
    background-color: green !important;
  }
</style>

<script>
  function myFunction() {
    var x = document.querySelectorAll("#testDiv p.example");
    x[0].style.backgroundColor = "red";
  }
</script>

从上面的代码中，我如何通过脚本标记中定义的 JS 代码中的上述样式属性中的 !important 覆盖 css 属性？

注意:我们有一些内部应用程序声明其样式很重要

Answer 1

使用 CSSStyleDeclaration.setProperty() 尝试此代码:

function myFunction() {
    var x = document.querySelectorAll("#testDiv p.example");
    x[0].style.setProperty("background-color", "red", "important");
}