Pegar estilos dos elementos

[Andre Luizao 0]

Coloquei um background-color:red; num id de um elemento chamado box1, só que quando eu vou pegar esse estilo no javascript simplesmente não consigo. Agora se esse estilo é aplicado diretamente na tag eu consigo. Por que isso? E como eu consigo pegar esse estilo do id box1? . Veja um exemplo:

<style type="text/css">
    #box1{background-color: red;width: 100px ; height: 100px;}
</style>

<div id="box1" ></div>
<div id="box2" style="background-color: yellow;width: 100px ; height: 100px;" ></div>
<script>
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");

    console.log(box1.style.backgroundColor); // retorna: nada
    console.log(box2.style.backgroundColor); // retorna: yellow
</script>

Por que não retorna o estilo que apliquei no css desse elemento

Obs.: Isso também vale para outros estilos como width, height e etc ...

[William Bruno 1501]

pq é assim q trabalha o javascript.

 

para pegar estilos da tag, aplicados com css externo ou na tag style, vc deve usar o getComputedStyle

 

https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle

[Andre Luizao 0]

Obrigado William resolveu o problema!

[William Bruno 1501]

Se vale mais uma dica, evite isso. =)

 

Prefira trabalhar com classes, colocando e tirando classes css, em vez de tentar ler as propriedades css aplicadas.

[Andre Luizao 0]

Ok obrigado denovo