Wie kann ich CSS-Regelwerte extrahieren und als Inline-Stile zurückgeben?

CSS-Regelwerte extrahieren

Um die Werte einer CSS-Regel zu extrahieren und sie in einem Inline-Stilformat zurückzugeben, ist ein universeller Ansatz erforderlich. Dazu gehört das Durchlaufen aller CSS-Regeln und das Identifizieren der Zielregel anhand ihres Selektors.

Beachten Sie das folgende CSS:

.test {
    width: 80px,
    height: 50px,
    background-color: #808080;
}

Der folgende Codeausschnitt zeigt, wie die Werte für „. test“-Regel:

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

var rules = getStyle('.test');

Die Variable cssText enthält jetzt einen String mit den CSS-Werten für die „.test“-Regel, as wenn sie in einem Inline-Stil deklariert wurden. Dieser Ansatz ist vielseitig und kann für jede CSS-Regel verwendet werden, unabhängig von ihrem Inhalt.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Regelwerte extrahieren und als Inline-Stile zurückgeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!