Heim > Web-Frontend > CSS-Tutorial > Wie extrahiere ich alle angewendeten Stile für ein Element mithilfe seiner ID in JavaScript?

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

Susan Sarandon
Freigeben: 2024-10-29 05:11:03
Original
636 Leute haben es durchsucht

How to Extract All Applied Styles for an Element Using Its 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;
}
Nach dem Login kopieren

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!

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