Récupérer tous les styles CSS pour un élément DOM (à la Firebug)

Question

Pour un élément DOM, comment obtenir tous les styles spécifiés dans css pour un élément particulier? Est-ce un cas d'itération sur tous les noms de style CSS?

Ou y at-il une manière plus élégante? Comment Firebug le fait-il?

Merci

Answer 1

Pour un élément DOM, comment je reçois tous les styles spécifiés dans un css élément particulier? Est-ce un cas de itérant sur tous les noms de style CSS?

Oui, c'est.

Ou y at-il une manière plus élégante?

Je ne sais pas plus élégant (l'élégance est assez élevé sur l'échelle subjective), mais il serait certainement plus court et plus doux si vous avez fait usage d'une bibliothèque tels que jQuery, voici une personne de solution codé répondre à une autre question:

How Can I Get List Of All Element CSS Attributes with jQuery?

Comment Firebug faire?

Je n'ai aucune idée.

Answer 2

Vous pouvez parcourir tous les styles CSS pour un élément comme celui-ci:

var myElement = document.getElementById('someId'); 
var myElementStyle = myElement.style; 

for(var i in myElementStyle){ 
    // if it's not a number-index, print it out. 
    if(/^[\d]+/.exec(i) == null){ 
     console.log("Style %s = %s", i, myElementStyle[i]); 
     /* 
     * Do other stuff here... 
     */ 
    } 
}

Answer 3

Vous devriez être en mesure d'obtenir avec getComputedStyle:

var css = window.getComputedStyle(element); 
for (var i=0; i<css.length; i++) { 
    console.log(css[i] +'='+css.getPropertyValue(""+css[i])) 
}