Wie rufe ich CSS-Eigenschaftswerte für Elemente in JavaScript ab?

CSS-Eigenschaften von Elementen mit JavaScript lesen

Problem:

So erhalten Sie den Wert einer CSS-Eigenschaft für ein Element mithilfe von JavaScript, wenn man bedenkt, dass das Stylesheet extern mit der Webseite verknüpft ist?

Lösung:

Es gibt zwei Hauptansätze:

1. Verwendung von document.styleSheets:

Diese Methode beinhaltet das manuelle Durchlaufen des document.styleSheets-Arrays und das Parsen der CSS-Regeln, um die gewünschte Eigenschaft zu finden. Dieser Ansatz wird jedoch nicht empfohlen, da er ressourcenintensiv und für die meisten Szenarien nicht praktikabel ist.

2. Erstellen eines passenden Elements und Verwenden von getComputedStyle:

Diese Methode erstellt ein Element mit demselben CSS-Selektor wie das Zielelement und verwendet die getComputedStyle-Methode, um den Eigenschaftswert abzurufen. Der Vorteil dieses Ansatzes besteht darin, dass er alle geerbten Stile und alle dynamisch angewendeten Stile berücksichtigt.

Codebeispiel:

Um die „color“-Eigenschaft eines Div abzurufen Verwenden Sie mit der Klasse „layout“ den folgenden Code:

<code class="javascript">function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle)
        return elem.currentStyle[prop]; //IE
}</code>

Verwendung:

<code class="javascript">window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}</code>

Zusätzliche Hinweise:

Inline ignorieren Um Stildefinitionen für das aktuelle Element zu erstellen, verwenden Sie die Funktion getNonInlineStyle:

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText; //Cache the inline style
    elem.cssText = "";        //Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); //Get inherited value
    elem.cssText = style;     //Add the inline style back
    return inheritedPropValue;
}</code>

Das obige ist der detaillierte Inhalt vonWie rufe ich CSS-Eigenschaftswerte für Elemente in JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!