Cannot read property 'style' of Null in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Cannot read property 'style' of Null in JavaScript #

There are 2 main reasons the "Cannot read property 'style' of null" error occurs:

  1. Accessing the style property on a DOM element that doesn't exist.
  2. Inserting the JS script tag above the HTML, where the DOM elements are declared.

cannot read property style of null

Here is an example of how the error occurs.

index.js
const example = null; // ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'style') console.log(example.style);

The error most commonly occurs if you use the getElementById() method and pass it an id that is not present in the DOM.

index.js
const box = document.getElementById('does-not-exist'); console.log(box); // 👉️ null // ⛔️ Cannot read properties null (reading 'style') box.style.color = 'blue';

To resolve the "Cannot read property 'style' of null" error, make sure that the DOM element you're accessing the style property on exists.

In the example, an element with the provided id does not exist in the DOM, so the getElementById method returns null. When we try to access the style property on a null value we get the error.

Another common reason for getting the error is placing the JS script tag before declaring the DOM elements.

To solve the "Cannot read property 'style' of null" error, make sure that the JS script tag is placed at the bottom of the body, after the HTML elements have been declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ⛔️ BAD - Script is run before HTML is declared ⛔️ --> <script src="index.js"></script> <div id="box" style="color: green">Hello</div> </body> </html>

We placed the JS script tag before declaring the div element, so the index.js file is run before the DOM element is created.

This means that the div will not be accessible in the index.js file.

index.js
const box = document.getElementById('box'); console.log(box); // 👉️ null // ⛔️ Cannot read properties null (reading 'style') box.style.color = 'blue';

You have to move the JS script tag to the bottom of the body, after the HTML elements.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" style="color: green">Hello</div> <!-- ✅ GOOD - Script is run after elements are declared ✅ --> <script src="index.js"></script> </body> </html>

Now the div element is available in the index.js file.

index.js
const box = document.getElementById('box'); console.log(box); // 👉️ the div element // ✅ works box.style.color = 'blue';

Now that the HTML element is created before the index.js script is run, we are able to access the DOM element.

Conclusion #

The "Cannot read property 'style' of null" error occurs when:

  • trying to access the style property on a null value, e.g. after calling getElementById with an invalid identifier
  • inserting the JS script tag before the DOM elements have been declared
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.