Wie rufe ich CSS-Eigenschaften von Webseitenelementen mithilfe von JavaScript ab?

CSS-Eigenschaften von Webseitenelementen mithilfe von JavaScript abrufen

Wenn eine CSS-Datei mit einer Webseite verknüpft ist, müssen JavaScript-Entwickler möglicherweise bestimmte CSS-Eigenschaften von Elementen lesen.

In diesem Szenario enthält eine Webseite ein

Um ein Element mit dem Klassennamen „layout“ zu verwenden, benötigen Entwickler eine Lösung, um eine bestimmte Eigenschaft dieses Elements mithilfe von JavaScript abzurufen. Obwohl verschiedene Ansätze verfügbar sind, sind zwei empfehlenswerte Optionen:

Option 1: Erstellen und Ändern eines Elements

1. Erstellen Sie ein Element mit denselben Eigenschaften wie das gewünschte Element (z. B. < ;div> mit dem Klassennamen „layout“).
2. Verwenden Sie die Methode getComputedStyle, um den berechneten Eigenschaftswert abzurufen. Diese Methode stellt den resultierenden Stil bereit, nachdem alle relevanten CSS-Regeln angewendet wurden.

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

window.onload = function(){
    var d = document.createElement("div");
    d.className = "layout";
    alert(getStyleProp(d, "color"));
}</code>

Option 2: Manuelles Parsen des Document.styleSheets-Objekts

1. Greifen Sie auf das document.styleSheets-Objekt zu , das ein Array aller mit dem Dokument verknüpften Stylesheets enthält.
2. Verwenden Sie die Methode getPropertyValue() für jedes Stylesheet, um den spezifischen Eigenschaftswert abzurufen, der dem gewünschten Selektor zugeordnet ist.

Dies Diese Option wird nicht empfohlen, es sei denn, sie ist ausdrücklich erforderlich, um alle von einem bestimmten Selektor definierten CSS-Eigenschaften zu erfassen.

Um Inline-Stildefinitionen des aktuellen Elements zu ignorieren, verwenden Sie außerdem die Funktion getNonInlineStyle():

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText;
    elem.cssText = "";
    var inheritedPropValue = getStyle(elem, prop);
    elem.cssText = style;
    return inheritedPropValue;
}</code>

Das obige ist der detaillierte Inhalt vonWie rufe ich CSS-Eigenschaften von Webseitenelementen mithilfe von JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!