Wie rufe ich alle Inline- und externen Stile eines HTML-Elements anhand der ID ab?

Stileigenschaften eines HTML-Elements anhand der Element-ID abrufen

Sie möchten eine Funktion erstellen, die bei Angabe der ID eines Elements alle darauf angewendeten Stile abruft. sowohl inline als auch extern definiert.

Hier ist eine umfassende Lösung:

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

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, return empty list.
    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]));
            // ^name        ^value
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push(name + ':' + style[name]);
        }
    } else { /* Ancient browsers..*/
        style = elem.style;
        for (var i = 0; i < style.length; i++) {
            styleNode.push(style[i] + ':' + style[style[i]]);
        }
    }
    return styleNode;
}</code>

Hier ist eine Aufschlüsselung:

• Iterieren Sie das von getComputedStyle bereitgestellte Stilobjekt, um alles zu erhalten Stileigenschaften und ihre Werte.
• Für Browser, die currentStyle (IE) unterstützen, iterieren Sie über dieses Objekt.
• Behandeln Sie Inline-Stile, indem Sie direkt über die Stileigenschaft des Elements iterieren.
• Das Ergebnis ist ein Array von Zeichenfolgen im Format „propertyName:propertyValue“.

Das obige ist der detaillierte Inhalt vonWie rufe ich alle Inline- und externen Stile eines HTML-Elements anhand der ID ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!