Verifique la visualización de CSS del elemento con JavaScript

Question 1

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

Question 2

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.

Question 3

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.

Question 4

Para jQuery, ¿te refieres a esto?

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

Puedes comprobarlo así:

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

Question 5

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'.

Question 6

si.

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

Question 7

JavaScript básico:

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

Question 8

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");

Question 9

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

Question 10

Puede verificarlo con, por ejemplo, jQuery:

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

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

Answer 1

97

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

javascript css Seth
fuente

Answer 2

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

Answer 3

2

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

jscripter

Answer 4

5

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

cade galt

Answer 5

12

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

vsync

Answer 6

1

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

user202729

Answer 7

2

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

Dan Davies Brackett

Answer 8

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

Answer 9

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

Kai Qing

Answer 10

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

sdleihssirhc

Answer 11

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

Answer 12

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

Answer 13

1

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

Felipe Alameda A

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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'.

Answer 18

De hecho, esto es útil.

Jonatas Walker

Answer 19

7

si.

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

Víctor
fuente

Answer 20

5

JavaScript básico:

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

Chugworth
fuente

Answer 21

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");

Answer 22

0

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

Joyce Babu
fuente

Answer 23

Puede verificarlo con, por ejemplo, jQuery:

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

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

Verifique la visualización de CSS del elemento con JavaScript

Respuestas: