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

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:

Um elemento tem certa classe
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