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

source:php.cn
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