Jquery: Cómo verificar si el elemento tiene cierta clase / estilo CSS

85

Tengo un div:

<div class="test" id="someElement" style="position: absolute"></div>

¿Hay alguna forma de verificar si el elemento determinado:

$("#someElement")

tiene una clase particular (en mi caso, "prueba").

Alternativamente, ¿hay alguna forma de comprobar que en element tiene un estilo determinado? En este ejemplo, me gustaría saber si el elemento tiene " position: absolute".

¡Muchas gracias!

javascript jquery css 0100110010101
fuente
14
No estoy seguro de si es la pregunta o la respuesta incorrecta, pero la pregunta tiene estilo = "prueba", y la respuesta busca class = "prueba"
whereresrhys
1
Supongo que la pregunta es incorrecta, ya que marcó la respuesta incorrecta como correcta; pero de todos modos, después de ver los votos, creo que la mayoría de la gente ha entrado aquí buscando la respuesta correcta a esta pregunta equivocada ... eh, si eso tiene algún sentido ... La respuesta del Dr.Jokepu, quiero decir. Por eso estoy aquí al menos.
BrainSlugs83

Respuestas:

57 
if($('#someElement').hasClass('test')) {
  ... do something ...
}
else {
  ... do something else ...
}
Darin Dimitrov
fuente
75
Esto no responde a la pregunta tal como se hizo; consulte la respuesta de DrJokepu a continuación.
Ryan Burney
281

Los estilos CSS son pares clave-valor, no solo "etiquetas". De forma predeterminada, cada elemento tiene un conjunto completo de estilos CSS asignados, la mayoría de ellos utiliza implícitamente los valores predeterminados del navegador y algunos de ellos se redefinen explícitamente en las hojas de estilo CSS.

Para obtener el valor asignado a una entrada CSS particular de un elemento y compararlo:

if ($('#yourElement').css('position') == 'absolute')
{
   // true
}

Si no redefinió el estilo, obtendrá el navegador predeterminado para ese elemento en particular.

Tamas Czinege
fuente
3
¿No hay forma de hacerlo con un selector?
BrainSlugs83
con esto, puede ver cuál es la propiedad real, lo que necesito saber es si esta propiedad se está configurando directamente o si se hereda del estilo / navegador css ... ¿es eso posible?
ante.sabo
No parece funcionar para el escenario si el DOM cambia / el valor css de un objeto cambia después de que se carga la página. ¿Alguna idea de cómo hacer que observe los cambios de CSS después de que se cargue el DOM?
Clavícula
@Collarbone Siempre puedes usar setTimeout () y clearTimeout () para retrasar la llamada un segundo más o menos una vez que el documento se ha cargado.
probie
13 
if ($("element class or id name").css("property") == "value") {
    your code....
}
Sandeep Gupta
fuente
4

O, si necesita acceder al elemento que tiene esa propiedad y no usa una identificación, puede seguir esta ruta:

$("img").each(function () {
        if ($(this).css("float") == "left") { $(this).addClass("left"); }
        if ($(this).css("float") == "right") { $(this).addClass("right"); }
    })
Kelseedev
fuente
1

he encontrado una solución:

$("#someElement")[0].className.match("test")

¡Pero de alguna manera creo que hay una mejor manera!

0100110010101
fuente
1

La pregunta es pedir dos cosas diferentes:

  1. Un elemento tiene cierta clase
  2. Un elemento tiene cierto estilo.

La segunda pregunta ya ha sido respondida. Para el primero, lo haría de esta manera:

if($("#someElement").is(".test")){
    // Has class test assigned, eventually combined with other classes
}
else{
    // Does not have it
}
Mario Vázquez
fuente