Verifique la visualización de CSS del elemento con JavaScript

97

¿Es posible verificar si el CSS de un elemento display == blocko noneusar JavaScript?

javascript css

— Seth
fuente

115

Como dice sdleihssirhc a continuación, si el elemento displayse hereda o se especifica mediante una regla CSS, deberá obtener su estilo calculado :

return window.getComputedStyle(element, null).display;

Los elementos tienen una stylepropiedad que le dirá lo que desea, si el estilo se declaró en línea o con JavaScript:

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

le dará un valor de cadena.

— Dan Davies Brackett
fuente

2

¿Qué pasa si no tiene CSS en línea?

— jscripter

5

Para simplificar, ¿por qué no obtener siempre el estilo calculado?

— cade galt

12

lo que es currentStyle? nunca escuché de él, también verifiqué document.body.currentStyley no obtuve nada (no me sorprendió)

— vsync

1

@vsync (y para referencia futura) Según MDN , es una propiedad de propiedad de la versión anterior de Internet Explorer.

— user202729

2

Gracias por los comentarios. Respuesta actualizada para la web moderna.

— Dan Davies Brackett

78

Si el estilo se declaró en línea o con JavaScript, puede acceder al styleobjeto:

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

De lo contrario, tendrá que obtener el estilo calculado y hay inconsistencias en el navegador. IE usa un currentStyleobjeto simple , pero todos los demás usan un método:

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

Se nullrequiere en Firefox versión 3 y anteriores.

— sdleihssirhc
fuente

¿No debería ser == en este caso?

— Kai Qing

@Kai El triple igual no hace coerción de tipo. Crockford explica por qué , en la sección denominada " ===y !==operadores".

— sdleihssirhc

Eso es muy interesante. Es curioso cómo algo como esto puede pasar desapercibido después de tantos años de programación. Siempre adopté la sugerencia de que === era un booleano estricto. Bueno saber.

— Kai Qing

3

@Kai: No hay problema con usar en ===lugar de ==aquí, pero tampoco hay ventaja. Se garantiza que ambos operandos son cadenas, por lo que ambos operadores realizan exactamente los mismos pasos.

— Tim Down

1

@hippietrail Y casi 10 años después (2019-10-27) todavía hay problemas. Verifique lo que informa MDN

— Felipe Alameda A

37

Para jQuery, ¿te refieres a esto?

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

Puedes comprobarlo así:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

— Kai Qing
fuente

9

Evite complicar demasiado la respuesta. Sé que jQuery se está convirtiendo en algo así como un estándar, pero no hay razón para agregar un marco completo solo para verificar el estilo de visualización de un elemento.

— zzzzBov

14

Sí, pero hice esto porque todos los demás dieron la respuesta javascript sin procesar, por lo que si estaba usando jquery pero no lo especificó, entonces habría algún uso en la publicación

— Kai Qing

18

Esta respuesta no es exactamente lo que desea, pero puede ser útil en algunos casos. Si sabe que el elemento tiene algunas dimensiones cuando se muestra, también puede usar esto:

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

EDITAR: Por qué esto podría ser mejor que la verificación directa de CSS display propiedad ? Porque no es necesario verificar todos los elementos principales. Si algún elemento padre tiene display: none, sus hijos también están ocultos, pero todavía lo está element.style.display !== 'none'.

— Martin Jiřička
fuente

De hecho, esto es útil.

— Jonatas Walker

7

si.

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

— Víctor
fuente

5

JavaScript básico:

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

— Chugworth
fuente

2

Para saber si es visible con JavaScript simple, verifique si la propiedad de visualización es 'ninguna' (no verifique 'bloque', también podría estar en blanco o 'en línea' y aún estar visible):

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

Si está usando jQuery, puede usar esto en su lugar:

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

— MarkXA
fuente

0

Con javascript puro puede verificar la style.displaypropiedad. Con jQuery puedes usar$('#id').css('display')

— Joyce Babu
fuente

-1

Puede verificarlo con, por ejemplo, jQuery:

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

Devolverá una cadena con información sobre la propiedad de visualización de este elemento.

— Marek Tuchalski
fuente