Wie ändere ich CSS-Deklarationsobjekte in JavaScript, ohne vorhandene Stile zu überschreiben?

Auf CSS-Deklarationsobjekte zugreifen und diese ändern

Bei der Webentwicklung müssen Sie möglicherweise CSS-Stile ändern, ohne auf Inline-Stile zurückzugreifen kann bestehende Stile überschreiben und die Funktionalität beeinträchtigen. In diesem Artikel wird gezeigt, wie Sie mithilfe von JavaScript auf CSS-Deklarationsobjekte zugreifen und diese ändern.

Beachten Sie den folgenden CSS-Code:

<code class="css">.box {
  color: green;
}

.box:hover {
  color: blue;
}</code>

Dieses CSS erstellt ein Feld mit grünem Text, der beim Schweben blau wird. Wenn Sie jedoch Inline-Styling für die Farbe anwenden, geht das Hover-Verhalten verloren:

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

Um dieses Problem zu vermeiden, können Sie auf das CSS-Deklarationsobjekt zugreifen und es direkt ändern. JavaScript stellt die cssRules-Eigenschaft für das DOM-Stylesheet-Objekt bereit, das Ihrem Stylesheet entspricht. Mit dieser Eigenschaft können Sie ein Array aller CSS-Regeln abrufen.

Um eine CSS-Regel zu ändern, können Sie die style-Eigenschaft des Regelobjekts verwenden. Um beispielsweise die Farbe des Felds in Rot zu ändern, könnten Sie das folgende JavaScript verwenden:

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

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

Beachten Sie, dass IE Regeln anstelle von cssRules verwendet.

Sie können eine Demonstration von sehen Diese Technik finden Sie unter http://jsfiddle.net/8Mnsf/1/.

Das obige ist der detaillierte Inhalt vonWie ändere ich CSS-Deklarationsobjekte in JavaScript, ohne vorhandene Stile zu überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!