Wie extrahiere ich alle angewendeten Stile für ein Element mithilfe seiner ID in JavaScript?

So erhalten Sie alle angewendeten Stile für ein Element anhand seiner ID

Problembeschreibung

So erstellen Sie eine Funktion, die die auf ein Element angewendeten Stile bestimmt Anhand der ID müssen sowohl Inline- als auch CSS-Dateistile berücksichtigt werden. Während die aktuelle Implementierung neben der ID auch den Namen des Stilattributs eines Elements akzeptiert, besteht das Ziel darin, alle Stilattribute allein durch die Angabe der ID zu erhalten.

Antwort

Methode:

1. Durch das CSSStyleDeclaration-Objekt iterieren: Eigenschaftsnamen innerhalb des getComputedStyle-Objekts abrufen; Verwenden Sie getPropertyValue, um Werte zu sammeln.
2. Verwenden Sie eine Standard-For-Schleife:Verwenden Sie diese Methode für currentStyle.
3. Beziehen Sie die gleiche Schleifentechnik ein:Wenden Sie dies an Ansatz für Inline-Stile.

Code:

function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    // Check if element exists (empty list if not)
    if (!elem) return [];

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

    // Modern browsers
    if (win.getComputedStyle) {
        style = win.getComputedStyle(elem, '');

        // Loop through style properties and gather values
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
        }
    } 
    // IE
    else if (elem.currentStyle) {
        style = elem.currentStyle;

        // Loop through currentStyle properties
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } 
    // Ancient browsers
    else {
        style = elem.style;

        // Loop through inline styles
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }

    // Return list of style properties
    return styleNode;
}

Das obige ist der detaillierte Inhalt vonWie extrahiere ich alle angewendeten Stile für ein Element mithilfe seiner ID in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!