Si definí un DIV como tal
<div id='myDiv' style='display:none;'>inner stuff</div>Puedo verificar su valor de visualización actual como tal
document.getElementById('myDiv').style.display;Y esto devuelve una cadena == 'ninguno'.
Pero, si configuro mi estilo de visualización a través de una clase, la declaración anterior devuelve una cadena de longitud cero.
<style> .myDivStyle {display:none;} </style> <div id='myDiv' class='myDivStyle'>inner stuff</div> <script> var x = document.getElementByID('myDiv').style.display == ''; // returns true </script>De hecho, el DIV está oculto en ambos casos, pero en el último caso, ¿cómo pruebo que está oculto (por ejemplo, mostrar = ninguno) del código de JavaScript?
Puede usar getComputedStyle para obtener los estilos usados en un elemento y no solo en la propiedad de estilo.
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 para obtener las propiedades CSS del elemento y CSSStyleDeclaration.getPropertyValue para obtener el valor de la propiedad de display :
<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>Generalmente uso HTMLElement.hidden para manejar la visibilidad de un div. Para obtener el estado, solo puede acceder a la propiedad de esta manera:
var x = document.getElementByID('myDiv').hiddenDevolverá un valor booleano, indicando si el elemento está oculto o no.