Wie kann ich in einem Stylesheet definierte CSS-Werte mithilfe von Javascript dynamisch ändern?

CSS-Werte mit Javascript ändern: Stylesheet-Manipulation verstehen

Oft besteht die Notwendigkeit, CSS-Werte dynamisch mit Javascript zu ändern. Während das Festlegen von Inline-CSS-Werten unkompliziert ist, kann es zu Herausforderungen führen, wenn das CSS in einem Stylesheet definiert wird.

Beispiel:

Bedenken Sie den folgenden HTML-Code:

<code class="html"><div id="tId" style="width: 10px"></div></code>

Und das entsprechende CSS:

<code class="css">#tId {
  width: 50%;
}</code>

Das Ändern des Inline-Style-Attributs mit Javascript überschreibt die Stylesheet-Werte, wie unten gezeigt:

document.getElementById('tId').style.width = "30%";

Dies führt zu:

<code class="html"><div id="tId" style="width: 30%"></div></code>

Herausforderung:

Das Problem bei diesem Ansatz ist, dass:

• Es betrifft nur Inline-Werte.
• Das Abrufen des Breitenwerts vor dem Ändern gibt Null zurück, wenn kein Inline-Stil vorhanden ist.

Lösung: Stylesheet-Werte manipulieren

Um diese Herausforderungen anzugehen, müssen wir um Werte direkt im Stylesheet zu manipulieren. So können Sie dies erreichen:

1. Erhalten Sie eine Reihe von Stylesheets mit document.styleSheets.
2. Suchen Sie mit document.styleSheets[styleIndex].href das spezifische Stylesheet, das Sie ändern möchten.
3. Rufen Sie ein Array von CSS-Regeln mit document.styleSheets[styleIndex].cssRules (für die meisten Browser) oder document.styleSheets[styleIndex].rules (für IE) ab.
4. Identifizieren Sie die CSS-Regel Sie ändern möchten, indem Sie die Eigenschaft selectorText überprüfen.

Der folgende Code demonstriert diesen Ansatz:

var styleIndex = ...; // Index of the targeted stylesheet
var ruleIndex = ...; // Index of the targeted CSS rule
var cssRuleCode = document.all ? 'rules' : 'cssRules';
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var value = rule.value; // Get the current value
rule.value = ...; // Modify the value

Durch die Implementierung dieses Ansatzes können Sie CSS-Werte in Stylesheets effektiv manipulieren und so sicherstellen dass die Änderungen global auf alle Elemente des angegebenen Stils angewendet werden.

Das obige ist der detaillierte Inhalt vonWie kann ich in einem Stylesheet definierte CSS-Werte mithilfe von Javascript dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!