Wie kann ich mithilfe von JavaScript alle Stilattribute und ihre Werte anhand ihrer ID auf ein HTML-Element anwenden?

Stilattribute eines Elements nach ID in JavaScript abrufen

Einführung

Es müssen alle Stilattribute und deren Elemente abgerufen werden Werte, die auf ein HTML-Element nur unter Verwendung seiner ID angewendet werden? In dieser Frage geht es darum, wie man genau das macht.

Das Problem verstehen

Das Ziel besteht darin, eine Funktion, getStyleById, zu erstellen, die die ID eines Elements übernimmt und gibt eine Liste aller Stilattribute und ihrer entsprechenden Werte zurück. Diese Funktion sollte sowohl Inline- als auch Stilattribute berücksichtigen, die in externen CSS-Dateien definiert sind.

Erstellung der Lösung

Um dies zu erreichen, ziehen Sie die folgenden Methoden in Betracht:

• Schleife durch das CSSStyleDeclaration-Objekt (getComputedStyle): Iterieren Sie über die Indizes des CSSStyleDeclaration-Objekts und verwenden Sie getPropertyValue, um die Werte für jeden Eigenschaftsnamen zu erhalten.
• Verwenden Sie für in-Schleife für currentStyle (exklusiv für IE): Verwenden Sie eine gewöhnliche for-in-Schleife für das currentStyle-Objekt, das nur im Internet Explorer existiert.
• Schleifen Sie Inline-Stile auf ähnliche Weise: Nutzen Sie dasselbe Schleifenansatz zum Abrufen von Inline-Stilattributen.

Code-Implementierung

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

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, 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 browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}</code>

Verwendung

Um dies zu verwenden Rufen Sie dazu einfach getStyleById mit der ID des Elements auf. Zum Beispiel:

<code class="javascript">console.log(getStyleById('my-element'));</code>

Dadurch wird ein Array gedruckt, das alle Stilattribute und ihre Werte enthält, die auf das Element mit der ID „my-element“ angewendet werden.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript alle Stilattribute und ihre Werte anhand ihrer ID auf ein HTML-Element anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!