Es gibt eine div zum Beispiel. Wenn der Wert width mithilfe von JavaScript als value1 definiert ist und derselbe Breitenwert in CSS als value2 (value1 != value2) definiert ist, welchen Wert erhält div am Ende für den width?CSS/JavaScript. Geben Sie dem gleichen Attribut einen Wert
Die Frage ist unklar, aber Stil Eigenschaften definiert auf das Element selbst (zB in seinem style Attribut oder über die style Eigenschaft überschreiben, die ist eine strukturierte Reflexion dieses Attributs), aka "Inline-Styles", haben Vorrang vor CSS-Regeln , es sei denn diese CSS-Regeln sind markiert !important. Wenn der Inline-Stil auch!important hat, gewinnt es. (Beachten Sie, dass Sie nicht !important Regeln über die Eigenschaften auf der style strukturierten reflektiert Eigenschaft können, müssen Sie entweder auf das Attribut oder setzen Sie die cssText Eigenschaft der Unterkunft bis vollständig die Inline-Stil zu ersetzen.)
So:
document.querySelector(".ex1").style.width = "200px";
document.querySelector(".ex2").style.width = "200px";
document.querySelector(".ex3").setAttribute("style", "width: 200px !important");div {
border: 1px solid #ddd;
}
.ex1 {
width: 300px;
}
.ex2 {
width: 300px !important;
}
.ex3 {
width: 300px !important;
}<div class="ex1">200px (inline wins)</div>
<div class="ex2">300px (CSS wins)</div>
<div class="ex3">200px (inline wins again)</div>Sie können sich Specificity von CSS anschauen.
Wenn Sie Javascript verwenden, wird der Stil als Inline-Stil hinzugefügt, es sei denn, Sie fügen ihn als Klasse hinzu.
Inline-Styles hinzugefügt, um ein Element (zum Beispiel style = "font-weight: bold") immer alle möglichen Arten in externen Stylesheets überschreiben und somit Gedanken an sein als die höchste Spezifität.
So definierten Wert js verwendet, wird der Wert definiert in CSS-Datei
Wie CSS in Kaskade gilt, wird es davon abhängen, welches Element Sie das letzte Mal geladen werden.
Javascript hinzufügen Stil zu Element als Inline-und Inline-Stil hat höhere Priorität als css.So, Javascript definierte Eigenschaften (Breite) sind für div anwendbar. Aber wenn Sie "! Wichtig" in css als div definiert haben, legen Sie die Eigenschaften gemäß css fest.
die unter Demo:
Datei demo.css Erstellen und unter Code einfügen:
#test1{
background-color: green;
width: 100px ;
}
#test2{
background-color: green;
width: 100px !important;
}
html-Datei erstellen und unter Code einfügen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div id="test1">
test1
</div>
<div id="test2">
test2
</div>
</body>
<script>
document.getElementById("test1").style.width="200px";
document.getElementById("test2").style.width="200px";
</script>
</html>
Probieren Sie es aus und finden Sie heraus! – jedifans
@jedifans 1+ für einen Kommentar des Tages –
Code ist 1024 Worte wert (oder sollte das 512 sein?). Nicht zuletzt weil * "Wenn' width'-Wert mit JavaScript als 'value1' definiert wird * * kann * * mindestens * drei verschiedene Dinge bedeuten. –