Wie können Sie mit JavaScript direkt auf CSS-Deklarationen zugreifen und diese ändern?

Auf CSS-Deklarationen mit JavaScript zugreifen und diese ändern

Inline-Styling bietet einen unkomplizierten Ansatz zum Ändern des Erscheinungsbilds eines Elements, kann jedoch bestehende CSS-Regeln außer Kraft setzen und beabsichtigtes Verhalten stören. Um dies zu vermeiden, können Entwickler die CSS-Deklarationsobjekte direkt ändern.

Auf CSS-Deklarationsobjekte kann über die styleSheets-Eigenschaft des Dokumentobjekts zugegriffen werden. Jedes styleSheet-Objekt enthält eine Sammlung von cssRules (oder Regeln im Internet Explorer). Diese Regeln stellen Stile dar, die im jeweiligen Stylesheet definiert sind.

Um ein CSS-Deklarationsobjekt zu ändern, rufen Sie die entsprechende Regel aus der cssRules-Sammlung des Stylesheets ab und greifen Sie auf dessen Style-Eigenschaft zu. Zum Beispiel:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';</code>

Dieser Code ändert die Farbdeklaration für die erste Regel im Stylesheet in „Rot“.

Beachten Sie, dass durch das Ändern der Stileigenschaft einer Regel alle vorhandenen überschrieben werden Erklärungen innerhalb dieser Regel. Um bestimmte Eigenschaften selektiv zu ändern, verwenden Sie die folgende Syntax:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style['background-color'] = 'blue';</code>

Dieser Code ändert nur die Eigenschaft „Hintergrundfarbe“ der ersten Regel.

Die folgende JSFiddle demonstriert diese Technik und zeigt, wie So ändern Sie die Farbe eines Elements mit der Klasse „Box“, ohne den Hover-Effekt zu beeinflussen: http://jsfiddle.net/8Mnsf/1/

Das obige ist der detaillierte Inhalt vonWie können Sie mit JavaScript direkt auf CSS-Deklarationen zugreifen und diese ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!