Cannot read property style of null - How to Fix Cannot read property 'style' of Null in JavaScript?

Cannot read property style of null: In this article, let us see how to fix the Cannot read property ‘style’ of Null error in JavaScript.

There are two main causes of the “Cannot read property ‘style’ of null” error:

Accessing the style property of a non-existent DOM element.
Inserting the JS script tag above the HTML element declarations, where the DOM elements are defined.

Let us see the examples to know how this error occurs and try to fix them.

Fixing Cannot read property ‘style’ of Null in JavaScript

Case#1: Accessing the style property of ‘null’ Variable

index.js

// Declare an variable with value as null  
const data = null;

// Apply style property on the above variable and print the result
console.log(data.style);

Output:

console.log(data.style);
^

TypeError: Cannot read property 'style' of null
at Object.<anonymous> (/tmp/ER7rLDlJor.js:5:18)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Explanation:

Here the style attribute cannot read the properties of 'null'. 
Hence TypeError: Cannot read property 'style' of null occurs

Case#2: Accessing the style property of a non-existent DOM element.

Typeerror: cannot read property ‘style’ of null: The error mostly arises when you call the getElementById() method with an id that does not exist in the DOM.

const gvn_id = document.getElementById('Id Not Exist');
console.log(gvn_id); 

// Apply the text attribute to the given element as below
gvn_id.style.text = 'Italic';

Output:

const gvn_id = document.getElementById('Id Not Exist');
^

ReferenceError: document is not defined
at Object.<anonymous> (/tmp/ER7rLDlJor.js:1:16)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Explanation:

To resolve the “Cannot read property ‘style’ of null” problem, ensure that the DOM element on which the style property is being accessed exists.

Because an element with the specified id does not exist in the DOM in this example, the getElementById function returns null We get the error when we try to access the style property on a null value.

Case#3: Placing the <script> Tag Before the HTML elements Declaration

Cannot read property ‘style’ of null: The other common cause of the error is positioning the JS script tag before declaring the DOM elements.

To resolve the “Cannot read property ‘style’ of null” error, add the JS script tag 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>
    <!-- Here the script tag is placed/run before the HTML declaration
   which is a  BAD approach-->
    <script src="index.js"></script>

    <div id="abc" style="color: blue">Btechgeeks</div>
  </body>
</html>

Since the JS script tag was positioned before declaring the div element, the index.js file is executed before the DOM element is declared.

This indicates that the div will be inaccessible in the index.js file.

index.js:

const abc = document.getElementById('abc');
console.log(abc); 

// As the div tag was declared below the scrpit tag 
// It is not accessible in index.js. so, error occurs
abc.style.color = 'red';

NOTE:

So, we must place the JS <script/> tag after the HTML elements at the bottom of the body.

Fixing the Error

index.html: Placing the <script/> tag at the bottom of body

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- Here we write the HTML declaration-->
    <div id="abc" style="color: blue">Btechgeeks</div>

    <!-- Here we write the script tag at the bottom of the body 
    which is a GOOD approach-->
    <script src="index.js"></script>
  </body>
</html>

In the index.js file, the div element is now accessible.

index.js:

const abc = document.getElementById('abc');
console.log(abc); 

// NOW it works fine 
abc.style.color = 'red';

We may now access the DOM element because the HTML element is created before the index.js script is executed.

In Brief

The error “Cannot read property ‘style’ of null” occurs when:

Attempting to access the style property on a null value, for example, after calling getElementById with an invalid identifier.
Inserting the JS script tag before the DOM elements have been declared.

Cannot read property style of null – How to Fix Cannot read property ‘style’ of Null in JavaScript?