Maison > interface Web > tutoriel CSS > Comment extraire tous les styles appliqués à un élément à l'aide de son identifiant en JavaScript ?

Comment extraire tous les styles appliqués à un élément à l'aide de son identifiant en JavaScript ?

Susan Sarandon
Libérer: 2024-10-29 05:11:03
original
704 Les gens l'ont consulté

How to Extract All Applied Styles for an Element Using Its ID in JavaScript?

Comment obtenir tous les styles appliqués à un élément à l'aide de son identifiant

Description du problème

Pour créer une fonction qui détermine les styles appliqués à un élément par son ID, il faut considérer à la fois les styles de fichiers en ligne et CSS. Alors que l'implémentation actuelle accepte le nom de l'attribut de style d'un élément à côté de son ID, l'objectif est d'acquérir tous les attributs de style simplement en fournissant l'ID.

Réponse

Méthode :

  1. Parcourir l'objet CSSStyleDeclaration : Obtenir les noms de propriétés dans l'objet getComputedStyle ; utilisez getPropertyValue pour rassembler des valeurs.
  2. Utilisez une boucle For standard : Utilisez cette méthode pour currentStyle.
  3. Incorporez la même technique de boucle : Appliquez ceci approche pour les styles en ligne.

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;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal