## Wie ändere ich CSS-Regeln mit JavaScript ohne Inline-Styling?

CSS-Regeln mit JavaScript ohne Inline-Styling ändern

Manchmal ist es notwendig, CSS-Deklarationen dynamisch zu ändern, ohne auf Inline-Styling zurückzugreifen. Betrachten Sie das folgende Beispiel:

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

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

Dies erzeugt ein blaues Kästchen, das beim Schweben grün wird. Allerdings kann das Inline-Styling dieses Verhalten außer Kraft setzen:

<code class="html"><div class="box" style="color:red;">TEXT</box></code>

In diesem Fall ist das Feld immer rot, unabhängig vom Hover-Status.

Um dieses Problem zu vermeiden, können Sie das ändern CSS-Deklarationsobjekt direkt. So geht's:

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

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

Beachten Sie, dass Internet Explorer Regeln anstelle von cssRules verwendet.

Hier ist eine Demo: [Fiddle](http://jsfiddle.net/8Mnsf/1/)

Das obige ist der detaillierte Inhalt von## Wie ändere ich CSS-Regeln mit JavaScript ohne Inline-Styling?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!