Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich mit jQuery CSS-Klassenregeln dynamisch in Echtzeit ändern?

Susan Sarandon
Freigeben: 2024-11-03 10:35:02
Original
325 Leute haben es durchsucht

How can I dynamically change CSS class rules in real time with jQuery?

CSS-Klassenregeln dynamisch mit jQuery ändern

Ihre Abfrage umfasst zwei Aspekte:

1. Ändern von Klassenregeln in Echtzeit

jQuery allein kann CSS-Klassenregeln nicht dynamisch ändern. Sie können jedoch die styleSheets-Eigenschaft des Dokumentobjekts verwenden, um direkt auf CSS-Regeln zuzugreifen.

Code:

<code class="javascript">document.getElementById("button").onclick = function() {
    var ss = document.styleSheets;

    for (var i = 0; i < ss.length; i++) {
        var rules = ss[i].cssRules;
        for (var j = 0; j < rules.length; j++) {
            if (rules[j].selectorText === ".classname") {
                rules[j].style.fontSize = "20px";
            }
        }
    }
};</code>
Nach dem Login kopieren

2. Klassenänderungen in einer Datei speichern

Um Klassenänderungen in einer Datei zu speichern, müssen Sie die CSS-Regeln extrahieren und sie über eine Ajax-Anfrage an den Server senden. Die serverseitige Implementierung umfasst das Erstellen oder Aktualisieren einer Datei mit den geänderten Regeln.

Zusätzliche Hinweise:

  • Für IE6-Kompatibilität verwenden Sie document.styleSheets anstelle von document.styleSheets.
  • Um die CSS-Regeln zu erhalten, greifen Sie auf die Rules-Eigenschaft des Stylesheet-Objekts zu.
  • Verwenden Sie die cssText-Eigenschaft, um CSS-Regeln festzulegen oder zu ändern.

Referenzen:

  • document.styleSheets (Mozilla): https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
  • styleSheet-Objekt (Mozilla): https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet
  • CssRule-Objekt (Mozilla): https://developer.mozilla .org/en-US/docs/Web/API/CSSRule
  • document.styleSheets (MSDN): https://docs.microsoft.com/en-us/ previous-versions/windows/internet-explorer /ie-developer/dom/document.stylesheets
  • CssRule-Objekt (MSDN): https://docs.microsoft.com/en-us/ previous-versions/windows/internet-explorer/ie-developer/ dom/cssrule

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage