Using CSS !important with JavaScript

Answer 1

To override an important style in the style sheet you need to set the style attribute with js:

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

p.example {
  background-color: blue !important;
}

  
A heading with class="example"
  
A paragraph with class="example".

Try it