Wie extrahiere ich den gesamten CSS-Regelinhalt als String?

So extrahieren Sie CSS-Regelwerte

Wie können Sie eine Zeichenfolge zurückgeben, die den gesamten Inhalt einer CSS-Regel enthält, z. B. das von Ihnen verwendete Format? Würde ich in einem Inline-Stil sehen? Dies kann erfolgen, ohne den spezifischen Inhalt der Regel zu kennen, sodass sie nicht nach Stilnamen extrahiert werden müssen.

Bedenken Sie das folgende CSS:

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

Zunächst haben wir Folgendes Code:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
            //this is where I can collect the style information, but how?
        }
    }
}
getStyle('.test')

Aufbauend auf der Antwort von scunliffe und der Anpassung einer anderen Quelle können wir diesen Code erweitern, um die CSS-Regel zu extrahieren Werte:

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;
}

alert(getStyle('.test'));

Dieser Code durchläuft die CSS-Regeln und prüft, ob der Selektortext mit dem angegebenen Klassennamen übereinstimmt. Für jede übereinstimmende Regel wird der entsprechende CSS-Text erfasst und in der Variablen cssText gesammelt. Schließlich gibt die Funktion den akkumulierten CSS-Text zurück und stellt eine Zeichenfolge mit dem gewünschten Inline-Stilformat bereit.

Das obige ist der detaillierte Inhalt vonWie extrahiere ich den gesamten CSS-Regelinhalt als String?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!