Wie ändere ich CSS-Deklarationen dynamisch mit JavaScript?

Auf CSS-Deklarationen mit JavaScript zugreifen und diese ändern

Um CSS-Deklarationen dynamisch zu ändern, ohne auf Inline-Stile zurückzugreifen, greifen Sie auf das CSS-Regelsatzobjekt zu aus dem DOM-Stylesheet.

So ändern Sie CSS-Deklarationen

1. Rufen Sie das Stylesheet-Objekt ab:

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

2. Rufen Sie die CSS-Regeln ab:

   <code class="javascript">var rules = sheet.cssRules || sheet.rules;</code>

3. Wählen Sie die gewünschte Regel anhand ihres Index aus:

   <code class="javascript">var rule = rules[0];</code>

4. Ändern Sie die Regeln Stile:

   <code class="javascript">rule.style.color = 'red';</code>

Beispiel

Betrachten Sie das folgende Beispiel:

<code class="html"><style>
    .box {color: green;}
    .box:hover {color: blue;}
</style>

<div class="box">TEXT</div></code>

So ändern Sie die Textfarbe von .box auf Rot setzen, ohne das Hover-Verhalten zu beeinflussen:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.color = 'red';</code>

Hinweis für Internet Explorer

Internet Explorer verwendet Regeln anstelle von cssRules, um auf die CSS-Regeln zuzugreifen.

Demonstration

Eine Live-Demonstration des Zugriffs und der Änderung von CSS-Deklarationen mit JavaScript finden Sie unter: http://jsfiddle.net/8Mnsf/1/

Das obige ist der detaillierte Inhalt vonWie ändere ich CSS-Deklarationen dynamisch mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!