Verifique a exibição de CSS do elemento com JavaScript

95

É possível verificar se um elemento é CSS display == blockou noneJavaScript?

javascript css Seth
fonte

Respostas:

111

Como sdleihssirhc diz abaixo, se o elemento displayestiver sendo herdado ou especificado por uma regra CSS, você precisará obter seu estilo computado :

return getComputedStyle(element, null).display;

Os elementos têm uma stylepropriedade que dirá o que você deseja, se o estilo foi declarado inline ou com JavaScript:

console.log(document.getElementById('someIDThatExists').style.display);

lhe dará um valor de string.

Dan Davies Brackett
fonte
2
E se não tiver css embutido?
jscripter de
5
Para simplificar, por que não obter sempre o estilo computado?
cade galt
12
o que é currentStyle? nunca ouvi falar, também verifiquei document.body.currentStylee não recebi nada (não fiquei surpreso)
vsync
1
@vsync (e para referência futura) De acordo com MDN , é uma propriedade proprietária da versão antiga do Internet Explorer.
user202729
2
Obrigado pelos comentários. Resposta atualizada para a web moderna.
Dan Davies Brackett
78

Se o estilo foi declarado inline ou com JavaScript, você pode apenas obter o styleobjeto:

return element.style.display === 'block';

Caso contrário, você terá que obter o estilo calculado e há inconsistências do navegador. O IE usa um currentStyleobjeto simples , mas todos os outros usam um método:

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

O nullera necessário no Firefox versão 3 e inferior.

sdleihssirhc
fonte
não deveria ser == neste caso?
Kai Qing
@Kai O triplo igual não faz coerção de tipo. Crockford explica o porquê , na seção chamada " ===e !==Operadores".
sdleihssirhc 01 de
Isso é muito interessante. Engraçado como algo assim pode simplesmente passar despercebido após tantos anos de programação. Sempre adotei a sugestão de que === era estritamente booleano. Bom saber.
Kai Qing
3
@Kai: Não há problema em usar em ===vez de ==aqui, mas também não há vantagem. Os dois operandos são strings, portanto, os dois operadores executam exatamente as mesmas etapas.
Tim Down
1
@hippietrail E quase 10 anos depois (27/10/2019) ainda existem problemas. Confira os relatórios do MDN
Felipe Alameda A
37

Para jQuery, você quer dizer assim?

$('#object').css('display');

Você pode verificar assim:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}
Kai Qing
fonte
9
Evite complicar demais a resposta. Eu sei que o jQuery está se tornando um padrão, mas não há razão para adicionar uma estrutura inteira apenas para verificar o estilo de exibição de um elemento.
zzzzBov 01 de
14
Sim, mas eu fiz isso porque todo mundo deu a resposta javascript bruta, então se ele estava usando jquery, mas não especificou, então haveria algum uso no pós
Kai Qing
18

Essa resposta não é exatamente o que você deseja, mas pode ser útil em alguns casos. Se você souber que o elemento tem algumas dimensões quando exibido, você também pode usar isto:

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

EDIT: Por que isso pode ser melhor do que a verificação direta da displaypropriedade CSS ? Porque você não precisa verificar todos os elementos pais. Se algum elemento pai tiver display: none, seus filhos também estarão ocultos, mas ainda estarão element.style.display !== 'none'.

Martin Jiřička
fonte
Na verdade, isso é útil.
Jonatas Walker
7

sim.

var displayValue = document.getElementById('yourid').style.display;
Vencedor
fonte
5

JavaScript básico:

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}
Chugworth
fonte
2

Para descobrir se ele está visível com JavaScript simples, verifique se a propriedade display é 'none' (não marque 'block', também pode estar em branco ou 'inline' e ainda estar visível):

var isVisible = (elt.style.display != "none");

Se você estiver usando jQuery, você pode usar isto:

var isVisible = $elt.is(":visible");
MarkXA
fonte
0

Com javascript puro você pode verificar a style.displaypropriedade. Com jQuery você pode usar$('#id').css('display')

Joyce Babu
fonte
-1

Você pode verificar com, por exemplo, jQuery:

$("#elementID").css('display');

Ele retornará uma string com informações sobre a propriedade de exibição deste elemento.

Marek Tuchalski
fonte