Cannot read properties of null (reading 'style') in JS

# Table of Contents

# Cannot read properties of null (reading 'style') in JS

There are 2 main reasons the "Cannot read properties of null (reading 'style')" error occurs:

Accessing the style property on a DOM element that doesn't exist.
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

Copied!
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

Copied!
const box = document.getElementById('does-not-exist');
console.log(box); // 👉️ null

// ⛔️ Cannot read properties null (reading 'style')
box.style.color = 'blue';

# Make sure to pass an existent `id` to the `getElementById` method

Make sure that the DOM element you're accessing the style property on exists.

In the example, an element with the provided id doesn't exist in the DOM, so the getElementById method returns null.

When we try to access the style property on a null value, the error occurs.

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

# Place the JS script tag at the bottom of the body tag

Make sure that the JS script tag is placed at the bottom of the body, after the HTML elements have been declared.

index.html

Copied!
<!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>

The code for this article is available on GitHub

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

Copied!
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

Copied!
<!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>

place script tag at bottom of body

The code for this article is available on GitHub

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

index.js

Copied!
const box = document.getElementById('box');
console.log(box); // 👉️ the div element

// ✅ works
box.style.color = 'blue';

The code for this article is available on GitHub

HTML code is parsed from top to bottom, so the script tag has to be placed at the bottom of the body tag, after all of the DOM elements it needs to access.

# Cannot read properties of undefined (reading 'style') in JS

There are 2 main reasons the "Cannot read properties of undefined (reading 'style')" error occurs:

Accessing the style property on a DOM element that doesn't exist, e.g. array index out of bounds.
Inserting the JS script tag above the HTML, where the DOM elements are declared.

cannot read property style of undefined

Here is an example of how the error occurs.

index.js

Copied!
const arr = [];

// ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'style')
console.log(arr[0].style)

We accessed an empty array at index 0 and got an undefined value back.

Then we attempted to access the style property on an undefined value which caused the error.

The error most commonly occurs when using the getElementsByClassName method with a class name that is not present in the DOM.

index.js

Copied!
const boxes = document.getElementsByClassName('does-not-exist');
console.log(boxes); // 👉️ []

// ⛔️ Cannot read properties of undefined (reading 'style')
boxes[0].style.color = 'red';

# Make sure to provide the correct class name to `getElementsByClassName`

Make sure that the value on which you're accessing the style property is a DOM element.

In the code sample, we passed a class name that doesn't exist to the getElementsByClassName method.

The method returned an empty array, so trying to access the array element at index 0 returns undefined. Accessing the style property on an undefined value causes the error.

The other common reason the error occurs is placing the JS script tag above the code that declares the DOM elements.

# Place the JS script tag at the bottom of the body tag

Make sure that the JS script tag is placed at the bottom of the body, after the HTML elements have been declared.

You have to place the JS script tag at the bottom of the body tag, after declaring the HTML elements.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="box" style="color: violet">Hello World</div>

    <!-- ✅️ GOOD - HTML elements are already available ✅ -->
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Now you can access the div element in the index.js file.

index.js

Copied!
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box]

// ✅ works
boxes[0].style.color = 'red';

access div in index js successfully

The code for this article is available on GitHub

HTML code is parsed from top to bottom, so the script tag has to be placed at the bottom of the body tag, after all of the DOM elements it needs to access.

If you need to set the style property on all elements in the collection, use a for...of loop.

index.js

Copied!
const boxes = document.getElementsByClassName('box');

for (const box of boxes) {
  box.style.color = 'red';
}

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

Alternatively, you can convert the collection to an array and use the Array.forEach() method.

index.js

Copied!
const boxes = Array.from(document.getElementsByClassName('box'));

boxes.forEach(box => {
  box.style.color = 'red';
});

The code for this article is available on GitHub

We used the Array.from() method to convert the collection of elements to an array and used the Array.forEach() method to iterate over the array, setting styles on each element.

The function we passed to the Array.forEach method gets called with each element in the array.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Cannot read properties of null (reading 'style') in JS

# Table of Contents