Comment récupérer tous les styles en ligne et externes d'un élément HTML par ID ?

Récupération des propriétés de style d'un élément HTML par ID d'élément

Vous souhaitez créer une fonction qui, lorsqu'elle est dotée de l'ID d'un élément, récupère tous les styles qui lui sont appliqués, à la fois en ligne et défini en externe.

Voici une solution complète :

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

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

Voici une ventilation :

• Parcourez l'objet de style fourni par getComputedStyle pour obtenir tous propriétés de style et leurs valeurs.
• Pour les navigateurs prenant en charge currentStyle (IE), parcourez cet objet.
• Gérez les styles en ligne en itérant directement sur la propriété de style de l'élément.
• Le résultat est un tableau de chaînes au format "propertyName:propertyValue".

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!