If I defined a DIV as such
<div id='myDiv' style='display:none;'>inner stuff</div>
I can check it's current display value as such
document.getElementById('myDiv').style.display;
And this returns a string == 'none'.
But, if I set my display style via a class the above statement returns a string of length zero.
<style>
.myDivStyle {display:none;}
</style>
<div id='myDiv' class='myDivStyle'>inner stuff</div>
<script>
var x = document.getElementByID('myDiv').style.display == ''; // returns true
</script>
Indeed the DIV is hidden in both cases, but in the latter case, how do I test that it is hidden (e.g. display=none) from javascript code?
You can use getComputedStyle to get the styles used on an element and not just on the style property.
var styles = getComputedStyle(document.getElementById('myDiv'));
var display = styles.getPropertyValue('display')
console.log(display);.myDivStyle {display:none;}<div id='myDiv' class='myDivStyle'>inner stuff</div>Use window.getComputedStyle to get the CSS properties of the element and CSSStyleDeclaration.getPropertyValue to get the value of the display property:
<style>
.myDivStyle {display:none;}
</style>
<div id='myDiv' class='myDivStyle'>inner stuff</div>
<script>
var x = window.getComputedStyle(document.getElementById('myDiv')).getPropertyValue("display")
console.log(x)
</script>I generally use HTMLElement.hidden for handling the visibility of a div.
In order to get the status you can just access the property like this:
var x = document.getElementByID('myDiv').hidden
It will return a boolean value, indicating if the element is hidden or not.