Como recuperar a propriedade de exibição de um elemento DOM?

  a { display: none; }   

a paragraph

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

O primeiro e o segundo alert não exibem nada além de uma string vazia, que eu pensei que deveria ser none e block . No entanto, após a configuração de display intensional, o terceiro alert finalmente alerta none .

Mas por que? Como eu poderia recuperar a propriedade de display corretamente?

Obrigado.

As propriedades .style.* mapeadas diretamente no atributo style , não no estilo aplicado. Para isso você quer getComputedStyle .

Eu consideraria seriamente alternar .className e separar a apresentação da lógica completamente.

Você precisa do valor computado da propriedade de exibição para o elemento. Você pode obter isso da seguinte maneira. Observe que a maioria dos navegadores window.getComputedStyle() suporte a window.getComputedStyle() enquanto o equivalente mais próximo no IE é a propriedade currentStyle do 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); } 

Eu recomendo usar uma biblioteca JavaScript para obter estilo computado. Por exemplo, usando jQuery, você pode recuperar o estilo computado com o método css () …

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

O método css () é uma solução entre navegadores, pois usa internamente o object style e o método getComputedStyle e o object currentStyle.

Se você pode usar o jQuery, existe um método chamado.

Para verificar se algo não é exibido, eu faria … $('someSelector').is(':visible')

Isso retornaria false se o atributo de exibição estivesse configurado como Nenhum.