Wie kann ich den Inhalt von CSS-Regeln in JavaScript abrufen?

Den Inhalt von CSS-Regeln abrufen

Zu wissen, wie man auf die Werte von CSS-Regeln zugreift, kann für das dynamische Styling oder die Manipulation der Darstellung von wertvoll sein Deine Elemente.

Um eine Zeichenfolge zurückzugeben, die den gesamten Inhalt einer CSS-Regel im Inline-Stilformat enthält, können Sie den folgenden Ansatz verwenden:

function getStyle(className) {</p>
<pre class="brush:php;toolbar:false">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'));

In diesem Code:

• getStyle ist eine Funktion, die einen CSS-Klassennamen als Eingabe verwendet und einen String zurückgibt, der die Regelwerte dafür enthält Klasse.
• classes ist ein Array aller CSS-Regeln im ersten Stylesheet im Dokument.
• Die Schleife durchläuft die Regeln und prüft, ob die selectorText-Eigenschaft (die den Selektor enthält, der mit verknüpft ist). Die Regel) stimmt mit dem angegebenen Klassennamen überein.
• Wenn eine Übereinstimmung gefunden wird, wird die cssText-Eigenschaft (die die Inline-Darstellung der Regel enthält) angehängt cssText-Variable.
• Schließlich wird die cssText-Variable zurückgegeben und in einem Warnfeld angezeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich den Inhalt von CSS-Regeln in JavaScript abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!