Pegar estilos dos elementos

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 ...