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

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