You can get the ‘uncaught typeerror cannot read property style of null’ in JavaScript if –
- You have used the style property on a DOM element that doesn’t exist.
- You have used the script tag before the HTML where the DOM elements are declared.
- You are trying to access the style property of an element that doesn’t have one.
Let’s have a look at each of these causes in detail.
‘uncaught typeerror cannot read property style of null’ In JavaScript
1) You have used the style property on a DOM element that doesn’t exist
If you try to set the style of an element that doesn’t exist in the DOM, you will get the ‘uncaught typeerror cannot read property style of null’ error. For example, consider the following code:
var element = document.getElementById("my-element");
element.style.color = "red";The code above will cause the ‘uncaught typeerror cannot read property style of null’ error if there is no element with the ID “my-element” in the DOM. To fix this, make sure that you are only trying to set the style of an element that exists in the DOM.
You can also use the try/catch statement to avoid this error. The try/catch statement will execute the code in the try block and, if an error occurs, will execute the code in the catch block. For example:
try {
var element = document.getElementById("my-element");
element.style.color = "red";
} catch (err) {
console.log(err); //will log ‘uncaught typeerror cannot read property style of null’
}2) You have used the script tag before the HTML where the DOM elements are declared
If you try to use a DOM element in your JavaScript code before it is declared in the HTML, you will get the ‘uncaught typeerror cannot read property style of null’ error. For example:
<html>
<head>
<script>
var element = document.getElementById("my-element");
element.style.color = "red"; //this will cause the ‘uncaught typeerror cannot read property style of null’ error
</script>
</head>
<body>
<div id="my-element">This is my element</div>
</body>
</html>To fix this, make sure that you are only trying to use a DOM element in your JavaScript code after it has been declared in the HTML. In the example above, you would need to move the script tag to the bottom of the HTML, like this:
<html>
<head>
</head>
<body>
<div id="my-element">This is my element</div>
<script>
var element = document.getElementById("my-element");
element.style.color = "red";
</script>
</body>
</html>You can also use the DOMContentLoaded event to avoid this error. The DOMContentLoaded event will wait for the HTML to be parsed before executing the code in the event handler. For example:
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var element = document.getElementById("my-element");
element.style.color = "red";
});
</script>
</head>
<body>
<div id="my-element">This is my element</div>
</body>
</html>3) You are trying to access the style property of an element that doesn’t have one
If you try to access the style property of an element that doesn’t have one, you will get the ‘uncaught typeerror cannot read property style of null’ error. For example, consider the following code:
var element = document.getElementById("my-element");
console.log(element.style); //this will cause the ‘uncaught typeerror cannot read property style of null’ errorTo fix this, make sure that you are only trying to access the style property of an element that has one. You can use the hasOwnProperty method to check if an element has a style property, like this:
var element = document.getElementById("my-element");
if (element.hasOwnProperty("style")) {
console.log(element.style);
}Conclusion
The ‘uncaught typeerror cannot read property style of null’ in JavaScript is caused by trying to access the style property of an element that doesn’t exist in the DOM or trying to access the style property of an element that doesn’t have one.
To fix this, make sure that you are only trying to access the style property of an element that exists in the DOM and has a style property. You can also use the try/catch statement or the DOMContentLoaded event to avoid this error.