Comment récupérer tous les styles d'un élément en utilisant uniquement son identifiant ?

Comment rassembler tous les styles d'un élément en utilisant uniquement son ID

Dans cette question, nous visons à développer une fonction, getStyleById, qui récupère tous les attributs de style et leurs valeurs correspondantes pour un élément spécifié, en fonction uniquement de son ID. Cette fonction doit prendre en compte à la fois les styles en ligne et les styles définis dans les fichiers CSS.

Solution :

Pour y parvenir, nous pouvons utiliser une approche globale :

1. Boucle à travers les propriétés : Récupérez tous les noms de propriétés connus à l'aide d'une boucle qui parcourt l'objet CSSStyleDeclaration (getComputedStyle). Pour chaque nom, obtenez la valeur à l'aide de getPropertyValue.
2. Optimiser les boucles : Améliorez l'efficacité en stockant getComputedStyle en dehors de la boucle dans une variable distincte.
3. Gestion des styles en ligne :Utilisez une boucle for…in ordinaire pour récupérer les informations 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 []; // 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>

En incorporant ces méthodes, notre La fonction peut rassembler efficacement tous les styles appliqués pour un élément donné, améliorant ainsi son utilité pour diverses tâches.

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!