Jquery: Como verificar se o elemento tem certa classe / estilo css

86

Eu tenho um div:

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

Existe alguma maneira de verificar se determinado elemento:

$("#someElement")

tem uma classe particular (no meu caso, "teste").

Como alternativa, existe uma maneira de verificar se um elemento tem um determinado estilo? Neste exemplo, gostaria de saber se o elemento tem " position: absolute".

Muito obrigado!

javascript jquery css 0100110010101
fonte
14
não tenho certeza se é a pergunta ou a resposta que está errada, mas a pergunta tem style = "test" e a resposta procura class = "test"
onde está em
1
Meu palpite é que a pergunta está errada, pois ele marcou a resposta errada como certa; mas independentemente disso, depois de olhar os votos, acho que a maioria das pessoas tropeçou aqui procurando a resposta correta para essa pergunta errada ... er, se isso faz algum sentido ... A resposta do DrJokepu, quero dizer. É por isso que estou aqui, pelo menos.
BrainSlugs83

Respostas:

58 
if($('#someElement').hasClass('test')) {
  ... do something ...
}
else {
  ... do something else ...
}
Darin Dimitrov
fonte
75
Isso não responde à pergunta conforme feita - veja a resposta do DrJokepu abaixo.
Ryan Burney
281

Estilos CSS são pares de valores-chave, não apenas "tags". Por padrão, cada elemento tem um conjunto completo de estilos CSS atribuídos a ele, a maioria deles está implicitamente usando os padrões do navegador e alguns deles são redefinidos explicitamente nas folhas de estilo CSS.

Para obter o valor atribuído a uma entrada CSS específica de um elemento e compará-lo:

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

Se você não redefiniu o estilo, obterá o padrão do navegador para aquele elemento específico.

Tamas Czinege
fonte
3
Não há como fazer isso com um seletor?
BrainSlugs83
com isso você pode ver qual é a propriedade real, o que eu preciso saber é se essa propriedade está sendo definida diretamente ou é herdada do estilo / navegador css ... isso é possível?
ante.sabo de
Não parece funcionar para o cenário se o valor DOM / css de um objeto mudar após o carregamento da página. Alguma ideia de como fazer com que ele observe as alterações do css após o carregamento do DOM?
Clavícula
@Collarbone Você sempre pode usar setTimeout () e clearTimeout () para atrasar a chamada por um segundo ou mais assim que o documento for carregado.
probie de
13 
if ($("element class or id name").css("property") == "value") {
    your code....
}
Sandeep Gupta
fonte
4

Ou, se você precisar acessar o elemento que tem essa propriedade e ele não usa um id, você pode seguir este caminho:

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

eu encontrei uma solução:

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

mas de alguma forma eu acredito que existe uma maneira melhor!

0100110010101
fonte
1

A pergunta está pedindo duas coisas diferentes:

  1. Um elemento tem certa classe
  2. Um elemento tem certo estilo.

A segunda pergunta já foi respondida. Para o primeiro, eu faria desta forma:

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