Comment puis-je appliquer tous les attributs de style et leurs valeurs à un élément HTML par son ID à l'aide de JavaScript ?

Obtenir les attributs de style d'un élément par ID en JavaScript

Intro

Besoin de récupérer tous les attributs de style et leurs valeurs appliquées à un élément HTML en utilisant uniquement son ID ? Cette question explique comment procéder exactement cela.

Comprendre le problème

L'objectif est de créer une fonction, getStyleById, qui prend l'ID d'un élément et renvoie une liste de tous les attributs de style et leurs valeurs correspondantes. Cette fonction doit prendre en compte à la fois les attributs en ligne et de style définis dans les fichiers CSS externes.

Créer la solution

Pour y parvenir, envisagez les méthodes suivantes :

• Boucle à travers l'objet CSSStyleDeclaration (getComputedStyle) : Parcourez les index de l'objet CSSStyleDeclaration, en utilisant getPropertyValue pour obtenir les valeurs de chaque nom de propriété.
• Utiliser pour in loop pour currentStyle (exclusivité IE) : Utilisez une boucle for in ordinaire pour l'objet currentStyle, qui n'existe que dans Internet Explorer.
• Bouclez les styles en ligne de la même manière : Utilisez les mêmes approche en boucle pour récupérer les attributs de style en ligne.

Implémentation du code

<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>

Utilisation

Pour utiliser ceci fonction, appelez simplement getStyleById avec l’ID de l’élément. Par exemple :

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

Cela imprimera un tableau contenant tous les attributs de style et leurs valeurs appliquées à l'élément avec l'ID 'mon-élément'.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!