“Uncaught TypeError: Cannot read property ‘style’ of null at.. “

I practiced the styling as shown below in a different document and it worked there for paragraphs and buttons but, for divs, however, it refuses to do so.

The first document.getElementById('red').style.width="100px"; statement returns an error

“Uncaught TypeError: Cannot read property ‘style’ of null at.. “

When I tried it in another document, it worked without placing the styles inside a function myFunction() {} statment

Any ideas?

<div class="red" > some content</div>
<div class="blue" > some content</div>
<div class="green" > some content</div>

<script type="text/javascript">

document.getElementById('red').style.width="100px";
document.getElementById('blue').style.width="100px";
document.getElementById('green').style.width="100px";
document.getElementById('red').style.height="100px";
document.getElementById('blue').style.height="100px";
document.getElementById('green').style.height="100px";
document.getElementById('red').style.backgroundColor="red";
document.getElementById('blue').style.backgroundColor="blue";
document.getElementById('green').style.backgroundColor="green";
document.getElementById('red').style.borderRadius="50px";
document.getElementById('blue').style.borderRadius="50px";
document.getElementById('green').style.borderRadius="50px";

document.getElementById('red').onclick.display="none";
document.getElementById('blue').onclick.display="none";
document.getElementById('green').onclick.display="none";

</script>