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

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>

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!