Wie kann ich mithilfe von JavaScript programmgesteuert auf Nicht-Inline-CSS-Werte zugreifen und diese ändern?

CSS-Werte mit Javascript ändern

Zugriff auf nicht-inline-CSS-Werte

In JavaScript Inline-CSS-Werte können einfach mit document.getElementById('id').style.width = value geändert werden. Diese Methode ist jedoch problematisch, wenn es um Nicht-Inline-CSS-Werte geht, die in Stylesheets definiert sind. Das Abrufen solcher Werte mit JavaScript gibt Null zurück, was die Ausführung bestimmter logischer Operationen erschwert.

Programmgesteuertes Ändern von Stileigenschaften

Um dieses Problem zu beheben, können CSS-Stylesheets aufgerufen werden und programmatisch geändert. So geht's:

1. Rufen Sie das Stylesheet-Array mit document.styleSheets ab.
2. Suchen Sie das spezifische Stylesheet, indem Sie seine document.styleSheets[styleIndex].href-Eigenschaft mit dem erwarteten Pfad vergleichen.
3. Rufen Sie das Array von CSS-Regeln mit document.styleSheets[styleIndex].rules im IE oder ab document.styleSheets[styleIndex].cssRules in anderen Browsern.
4. Identifizieren Sie die gewünschte Regel, indem Sie ihre selectorText-Eigenschaft mit dem bekannten Selektor (z. B. #tId) vergleichen.

Einmal die Regel identifiziert wird, kann seine Value-Eigenschaft gelesen und gesetzt werden. Dies ermöglicht das Abrufen und Ändern von CSS-Werten, ohne die Inline-Stile zu ändern. Der folgende Code demonstriert diesen Vorgang:

var styleIndex = 0; // Index of the stylesheet to modify
var ruleIndex = 1; // Index of the rule to modify
var cssRuleCode = document.all ? 'rules' : 'cssRules'; // Account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; // e.g., '#tId'
var value = rule.value; // Get the current value or set a new value using `rule.value = 'new_value'`

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript programmgesteuert auf Nicht-Inline-CSS-Werte zugreifen und diese ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!