Recuperar la propiedad de visualización de un elemento DOM: revelar el valor real

El código HTML proporcionado introduce un párrafo y un ancla con visualización diferente estilos. Sin embargo, recuperar estos estilos a través de la propiedad de estilo parece dar como resultado cadenas vacías inesperadas. ¿Por qué es así y cómo se puede recuperar con precisión la propiedad de visualización?

El enigma de la cadena vacía

La confusión inicial surge porque el .estilo.* Las propiedades se asignan directamente al atributo de estilo, no al estilo aplicado. Esto significa que básicamente estás verificando la declaración de estilo en línea, que puede no siempre reflejar el estilo calculado.

La solución: getComputedStyle

Para obtener el estilo aplicado real , incluidas las propiedades heredadas, debe utilizar el método getComputedStyle. Este método toma un elemento DOM como argumento y devuelve un objeto CSSStyleDeclaration que contiene valores de estilo calculados.

El código proporcionado se puede modificar para usar getComputedStyle de la siguiente manera:

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);

Ahora, la primera alerta mostrará "ninguno" para la etiqueta de anclaje, la segunda alerta mostrará "bloque" para el elemento de párrafo y la tercera alerta mostrará "ninguno" después de la configuración de visualización intencional. Esto refleja con precisión los estilos de visualización calculados de los elementos.

Enfoque alternativo: alternancia de clases

En lugar de confiar en la propiedad de visualización, podría considerar usar nombres de clases para alternar la visibilidad de los elementos. Al separar la presentación de la lógica, puedes simplificar tu código y hacerlo menos propenso a problemas relacionados con el estilo.