Ottieni tutti gli stili CSS per un elemento DOM (a la Firebug)

Question

Per un elemento DOM, come ottenere tutti gli stili specificati in css per un particolare elemento? È un caso di iterare su tutti i nomi di stile css?

O c'è un modo più elegante? Come fa Firebug a farlo?

Grazie

Answer 1

Per un elemento DOM, come ho tutti stili specificati in CSS per un particolare elemento ? È un caso di iterare su tutti i nomi di stile css?

Sì, lo è.

O c'è un modo più elegante?

Non so su più elegante (l'eleganza è piuttosto alto nella scala soggettiva), ma sarebbe certamente più breve e più dolce se hai fatto uso di una libreria, come jQuery, ecco una soluzione di qualcuno codificata per rispondere a un'altra domanda:

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

Come si fa Firebug farlo?

Non ne ho idea.

Answer 2

È possibile scorrere tutti gli stili CSS per un elemento come questo:

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

si dovrebbe essere in grado di farlo con getComputedStyle:

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