Verwendung von CSS !wichtig mit JavaScript

Lesezeit: 3 Minuten

Benutzeravatar von Nagaraju_Y
Nagaraju_Y

<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>

Wie kann ich im obigen Code die CSS-Eigenschaft durch !important in der obigen Stileigenschaft aus meinem im script-Tag definierten JS-Code überschreiben?

Hinweis: Wir haben einige interne Anwendungen, deren Stile für wichtig erklärt wurden

  • Tut style.backgroundColor = "red !important" nicht arbeiten?

    – evolutionbox

    19. Juli 2016 um 9:16 Uhr

  • Nein..wenn ich !important behielt, dass css nicht funktioniert, bcoz, ist das kein korrektes Format.

    – Nagaraju_Y

    19. Juli 2016 um 9:22 Uhr

  • In meiner Anwendung kann ich keine Stile von .css-Dateien verwenden, daher muss ich JavaScript-Code verwenden, um den vorhandenen Code zu überschreiben. Der Code, den ich oben angegeben habe, dient nur zu Referenzzwecken

    – Nagaraju_Y

    19. Juli 2016 um 9:24 Uhr

Benutzeravatar von Văn Quyết
Van Quyết

Versuchen Sie diesen Code mit CSSStyleDeclaration.setProperty():

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

  • @ Nagaraju_007 Dieser überschreibt jedoch nur die angegebene Eigenschaft, wobei die Lösung von mir und Pete den gesamten Stil überschreiben könnte, also +1 von mir … und teste es richtig

    – Asons

    19. Juli 2016 um 9:45 Uhr


  • Ich habe dieses @LGSon, wenn wir eine einzelne Eigenschaft festlegen möchten, dann war dies gut, und wenn wir für eine Gruppe von Eigenschaften festlegen möchten, ist Ihr Code gut.

    – Nagaraju_Y

    21. Juli 2016 um 6:47 Uhr

Hier sind 2 verschiedene Skripte, eines zielt auf die CSS-Eigenschaft eines Elements und das andere auf seinen Stil ab.

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

<p>Click the button to add a background color to the first element in the document with class="example" (index 0).</p>

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

<p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>

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

Um einen wichtigen Stil im Stylesheet zu überschreiben, müssen Sie das style-Attribut mit js setzen:

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

1430210cookie-checkVerwendung von CSS !wichtig mit JavaScript

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy