Wie rufe ich alle Stile eines Elements nur mithilfe seiner ID ab?

So erfassen Sie alle Stile eines Elements nur mithilfe seiner ID

In dieser Frage möchten wir eine Funktion entwickeln, getStyleById, die Ruft alle Stilattribute und ihre entsprechenden Werte für ein angegebenes Element ab, wobei nur seine ID angegeben wird. Diese Funktion sollte sowohl Inline-Stile als auch in CSS-Dateien definierte Stile berücksichtigen.

Lösung:

Um dies zu erreichen, können wir einen umfassenden Ansatz anwenden:

1. Schleife durch die Eigenschaften: Rufen Sie alle bekannten Eigenschaftsnamen mithilfe einer Schleife ab, die das CSSStyleDeclaration-Objekt (getComputedStyle) durchläuft. Rufen Sie für jeden Namen den Wert mit getPropertyValue ab.
2. Schleifen optimieren: Erhöhen Sie die Effizienz, indem Sie getComputedStyle außerhalb der Schleife in einer separaten Variablen speichern.
3. Inline-Stilverarbeitung :Verwenden Sie eine gewöhnliche for…in-Schleife, um Inline-Stilinformationen abzurufen.

Code-Implementierung:

<code class="javascript">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    if (!elem) return []; // Empty list if element is absent.
    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>

Durch die Integration dieser Methoden können unsere Die Funktion kann effektiv alle angewendeten Stile für ein bestimmtes Element sammeln und so seinen Nutzen für verschiedene Aufgaben verbessern.

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