Lendo informações de estilo CSS não-inline do Javascript

Eu sei que devo estar perdendo alguma coisa aqui, mas não consigo fazer isso funcionar.

Eu atribuí uma cor de fundo ao corpo de um documento html usando as tags de estilo dentro da seção head do documento, mas quando tento lê-lo via JavaScript, não recebo nada:

<html>
<head>
<style>
body { background-color: #ff0; }
</style>
</head>
<body>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

.. no entanto, se eu atribuir o estilo inline, funciona:

<html>
<head></head>
<body style='background-color: #ff0;'>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

Eu sei que estou faltando algo básico, mas minha mente não está na zona hoje - alguém pode me dizer por que meu primeiro cenário não está funcionando?

obrigado

questionAnswers(4)

yourAnswerToTheQuestion