Jquery: come verificare se l'elemento ha una determinata classe / stile CSS

85

Ho un div:

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

C'è un modo per verificare se un determinato elemento:

$("#someElement")

ha una classe particolare (nel mio caso, "test").

In alternativa, c'è un modo per verificare che en element abbia un certo stile? In questo esempio, vorrei sapere se l'elemento ha " position: absolute".

Grazie mille!

javascript jquery css

— 0100110010101
fonte

14

non sono sicuro che sia la domanda o la risposta sbagliata, ma la domanda ha style = "test" e la risposta cerca class = "test"

— whereesrhys

1

La mia ipotesi è che la domanda sia sbagliata, poiché ha contrassegnato la risposta sbagliata come giusta; ma a prescindere, dopo aver esaminato i voti, penso che la maggior parte delle persone sia inciampata qui alla ricerca della risposta corretta a questa domanda sbagliata ... ehm, se ha senso ... La risposta di DrJokepu, intendo. Almeno è per questo che sono qui.

— BrainSlugs83

57

if($('#someElement').hasClass('test')) {
  ... do something ...
}
else {
  ... do something else ...
}

— Darin Dimitrov
fonte

75

Questo non risponde alla domanda come chiesto - vedi la risposta di DrJokepu di seguito.

— Ryan Burney,

281

Gli stili CSS sono coppie chiave-valore, non solo "tag". Per impostazione predefinita, a ogni elemento è assegnato un set completo di stili CSS, la maggior parte di essi utilizza implicitamente le impostazioni predefinite del browser e alcuni di essi vengono ridefiniti esplicitamente nei fogli di stile CSS.

Per ottenere il valore assegnato a una particolare voce CSS di un elemento e confrontarlo:

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

Se non hai ridefinito lo stile, otterrai il browser predefinito per quel particolare elemento.

— Tamas Czinege
fonte

3

Non c'è modo di farlo con un selettore?

— BrainSlugs83

con questo puoi vedere qual è la proprietà effettiva, quello che ho bisogno di sapere è se questa proprietà viene impostata direttamente o è ereditata dallo stile / browser CSS ... è possibile?

— ante.sabo

Non sembra funzionare per lo scenario se il DOM cambia / il valore css di un oggetto cambia dopo il caricamento della pagina. Qualche idea su come fare in modo che guardi le modifiche CSS dopo il caricamento del DOM?

— Clavicola

@Collarbone Puoi sempre usare setTimeout () e clearTimeout () per ritardare la chiamata di un secondo circa una volta che il documento è stato caricato.

— novellino

13

if ($("element class or id name").css("property") == "value") {
    your code....
}

— Sandeep Gupta
fonte

4

Oppure, se devi accedere all'elemento che ha quella proprietà e non usa un id, potresti seguire questo percorso:

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

— kelseedev
fonte

1

ho trovato una soluzione:

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

ma in qualche modo credo che ci sia un modo migliore!

— 0100110010101
fonte

1

La domanda richiede due cose diverse:

Un elemento ha una certa classe
Un elemento ha un certo stile.

La seconda domanda è già stata risolta. Per il primo, lo farei in questo modo:

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

— Mario Vázquez
fonte