Consider the following html.
<div id="test" style="display:none"></div>
<script> console.log(document.getElementById("test").style.display) </script>
This results in none in the console log. However, if instead:
<style> #test{ display: none; } </style>
<div id="test"></div>
<script> console.log(document.getElementById("test").style.display) </script>
then it fails to determine the display property. Why is that the case?
>Solution :
Accessing the style of an element in javascript via element.style only works, when the style is set inline.
Otherwise, if the style is set in a css file or with the <style></style> tag, you have to use the getComputedStyle() method.
You can find further information here and in this SO question!