Solve - Cannot read property 'style' of Null in JavaScript

avatar

Borislav Hadzhiev

Sat Oct 23 20212 min read

banner

Photo by Hannah Morgan

Solve - 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.
index.js
const example = null; // โ›”๏ธ 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 ran before HTML is declared โ›”๏ธ --> <script src="index.js"></script> <div id="box" style="color: green">Hello</div> </body> </html>

Because we placed the JS script tag before declaring the div element, the index.js file is executed before the DOM element is declared.

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 executed 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 executed, 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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee