Wie rufe ich CSS-Eigenschaften von Webseitenelementen mithilfe von JavaScript ab?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-10-23 19:04:02

Original

742 Leute haben es durchsucht

How to Retrieve CSS Properties of Webpage Elements Using JavaScript?

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

Erstellen Sie ein Element mit denselben Eigenschaften wie das gewünschte Element (z. B. < ;div> mit dem Klassennamen „layout“).
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>

Nach dem Login kopieren

Option 2: Manuelles Parsen des Document.styleSheets-Objekts

Greifen Sie auf das document.styleSheets-Objekt zu , das ein Array aller mit dem Dokument verknüpften Stylesheets enthält.
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>

Nach dem Login kopieren

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!