Heim > Web-Frontend > CSS-Tutorial > Wie rufe ich alle Stilattribute eines Elements anhand der ID in JavaScript ab?

Wie rufe ich alle Stilattribute eines Elements anhand der ID in JavaScript ab?

Susan Sarandon
Freigeben: 2024-10-30 22:42:03
Original
281 Leute haben es durchsucht

How to Retrieve All Style Attributes of an Element by ID in JavaScript?

Alle Stilattribute nach Element-ID abrufen

Sie können alle auf ein Element angewendeten Stilattribute abrufen, indem Sie dessen ID mit der folgenden Methode angeben:

Durchlaufen des CSSStyleDeclaration-Objekts:

Durchlaufen Sie die Indizes des CSSStyleDeclaration-Objekts (getComputedStyle), um jeden bekannten Eigenschaftsnamen zu erhalten. Verwenden Sie getPropertyValue mit diesem Namen, um den Wert abzurufen.

Inline-Stile verarbeiten:

Verwenden Sie für Inline-Stile dieselbe Schleifenmethode wie für andere Stiltypen.

Alles zusammenfügen:

Hier ist der Code:

<code class="javascript">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}

function getAllStyles(elem) {
    if (!elem) return [];

    var win = document.defaultView || window, style, styleNode = [];

    if (win.getComputedStyle) { /* Modern browsers */
        style = win.getComputedStyle(elem, '');
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } else { /* Ancient browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}</code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie rufe ich alle Stilattribute eines Elements anhand der ID in JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage