Wie kann ich CSS-Klassendefinitionen mit JavaScript dynamisch ändern und entfernen?

CSS-Klassendefinitionen dynamisch ändern und entfernen

Das Hinzufügen von CSS-Klassen zur Laufzeit ist eine bekannte JavaScript-Manipulation, deren Funktionalität jedoch auf das Ändern oder Entfernen erweitert wird vorhandene Klassendefinitionen können entmutigend wirken. Dieser Artikel befasst sich mit dieser Herausforderung, indem er Möglichkeiten untersucht, diese Vorgänge programmgesteuert auszuführen.

CSS-Klassendefinitionen ändern

Um eine CSS-Klassendefinition zu bearbeiten, befolgen Sie diese Schritte:

1. Greifen Sie mit document.styleSheets auf die Stylesheets des Dokuments zu.
2. Durchlaufen Sie die cssRules-Eigenschaft jedes Stylesheets, um die Regel zu finden, die Sie ändern möchten.
3. Sobald die Regel gefunden wurde, aktualisieren Sie ihre Stileigenschaft mit setProperty.

Zum Beispiel, um die Schriftgröße von zu ändern die .menu-Klasse:

let styleSheet = document.styleSheets[0];
let rule = styleSheet.cssRules[1]; // Assuming ".menu" is the second rule
rule.style.setProperty('font-size', '15px');

CSS-Klassendefinitionen entfernen

An Um eine CSS-Klassendefinition zu entfernen, führen Sie die folgenden Schritte aus:

1. Suchen Sie das Stylesheet und die Regel wie im vorherigen Abschnitt beschrieben.
2. Entfernen Sie die Regel mit deleteRule aus der cssRules-Sammlung.

Zum Beispiel, um die .menu-Klassendefinition zu entfernen:

let styleSheet = document.styleSheets[0];
let rule = styleSheet.cssRules[1]; // Assuming ".menu" is the second rule
stylesheet.deleteRule(1);

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