<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
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>
14302100cookie-checkVerwendung von CSS !wichtig mit JavaScriptyes
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