¿Cómo recuperar la propiedad de visualización de un elemento DOM?

<html> 
    <style type="text/css"> 
     a { 
      display: none; 
     } 
    </style> 
    <body> 
     <p id="p"> a paragraph </p> 
     <a href="http://www.google.com" id="a">google</a> 
    </body> 
    <script type="text/javascript"> 
     var a = (document.getElementById('a')).style; 
     alert(a.display); 
     var p = (document.getElementById('p')).style; 
     alert(p.display); 
     p.display = 'none'; 
     alert(p.display); 
    </script> 
</html>

La primera y la segunda pantalla alert nada que no sea una cadena vacía, lo cual pensé que debería ser none y block. Sin embargo, después de la configuración intensionalmente display, la tercera alert finalmente alerta none.¿Cómo recuperar la propiedad de visualización de un elemento DOM?

¿Pero por qué? ¿Cómo puedo recuperar la propiedad display correctamente?

Gracias.

Fuente

2010-09-23 Jichao

Los .style.* propiedades del mapa directamente sobre el atributostyle, no al estilo aplicado. Para eso quiere getComputedStyle.

Consideraría seriamente alternar .className y separar la presentación de la lógica por completo.

Fuente

2010-09-23 12:30:22 Quentin

estilo no se debe llamar un atributo. Es un objeto Cada nodo de elemento DOM tiene una propiedad de estilo. Esta propiedad es un objeto. ... El atributo de estilo HTML se usa para agregar propiedades a la propiedad de estilo del nodo DOM que representa el elemento HTML. Una vez que se analiza el código HTML, ya no tenemos atributos HTML, sino propiedades del objeto. –

@ Šime Vidas: Creo que si vuelve a leer la respuesta de David, se dará cuenta de que ha dibujado correctamente esa distinción. –

@David Dorward: Gracias por su ayuda. Entonces, ¿cuál es el uso del atributo 'style' ya que no puede reflejar el cambio en tiempo real del estilo CSS? – Jichao

Necesita el valor calculado de la propiedad de visualización para el elemento. Puedes obtener esto de la siguiente manera. Tenga en cuenta que la mayoría de los navegadores soportan window.getComputedStyle() mientras que el equivalente más cercano en el IE es currentStyle la propiedad del elemento:

var el = document.getElementById('a'); 
var styleObj; 

if (typeof window.getComputedStyle != "undefined") { 
    styleObj = window.getComputedStyle(el, null); 
} else if (el.currentStyle != "undefined") { 
    styleObj = el.currentStyle; 
} 

if (styleObj) { 
    alert(styleObj.display); 
}

Fuente

2010-09-23 12:38:37

Si puede utilizar jQuery, hay un método llamado .is

Para comprobar si no se muestra algo, Haría ... $('someSelector').is(':visible') ...

Esto devolvería falso si el atributo de visualización está establecido en Ninguno.

Fuente

2010-09-23 12:40:20

Recomendaría utilizar una biblioteca de JavaScript para obtener el estilo calculado. Por ejemplo, usando jQuery se puede recuperar el estilo calculada con el método css() ...

$("#a").css("display");

El método css() es una solución multi-navegador, ya que utiliza internamente el objeto de estilo y tanto el método y getComputedStyle el objeto currentStyle.

Fuente

2010-09-23 16:30:00

¿Cómo recuperar la propiedad de visualización de un elemento DOM?

Respuesta

Cuestiones relacionadas