JQuery: Jak sprawdzić, czy element ma określoną klasę / styl CSS

85

Mam div:

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

Czy istnieje sposób, aby sprawdzić, czy dany element:

$("#someElement")

ma określoną klasę (w moim przypadku „test”).

Czy można też sprawdzić, czy element en ma określony styl? W tym przykładzie chciałbym wiedzieć, czy element ma „ position: absolute”.

Dziękuję Ci bardzo!

javascript jquery css 0100110010101
źródło
14
nie jestem pewien, czy to pytanie, czy odpowiedź jest nieprawidłowa, ale pytanie ma style = "test", a odpowiedź wygląda na class = "test"
wheresrhys
1
Domyślam się, że pytanie jest błędne, ponieważ oznaczył złą odpowiedź jako dobrą; ale niezależnie od tego, po spojrzeniu na głosy, myślę, że większość ludzi natknęła się tutaj, szukając poprawnej odpowiedzi na to złe pytanie ... eee, jeśli to ma jakiś sens ... Mam na myśli odpowiedź od Dr Jokepu. Dlatego przynajmniej tu jestem.
BrainSlugs83

Odpowiedzi:

57 
if($('#someElement').hasClass('test')) {
  ... do something ...
}
else {
  ... do something else ...
}
Darin Dimitrov
źródło
75
To nie odpowiada na zadane pytanie - zobacz odpowiedź DrJokepu poniżej.
Ryan Burney,
281

Style CSS to pary klucz-wartość, a nie tylko „tagi”. Domyślnie każdy element ma przypisany pełny zestaw stylów CSS, większość z nich pośrednio korzysta z domyślnych ustawień przeglądarki, a niektóre z nich są jawnie przedefiniowane w arkuszach stylów CSS.

Aby uzyskać wartość przypisaną do konkretnego wpisu CSS elementu i porównać go:

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

Jeśli nie przedefiniowałeś stylu, otrzymasz domyślną przeglądarkę dla tego konkretnego elementu.

Tamas Czinege
źródło
3
Nie da się tego zrobić za pomocą selektora?
BrainSlugs83
dzięki temu możesz zobaczyć, jaka jest rzeczywista właściwość, muszę wiedzieć, czy ta właściwość jest ustawiana bezpośrednio, czy jest dziedziczona ze stylu / przeglądarki CSS ... czy to możliwe?
ante.sabo
Wydaje się, że nie działa w scenariuszu, jeśli zmienia się DOM / wartość CSS obiektu po załadowaniu strony. Masz pomysł, jak sprawić, by obserwował zmiany css po załadowaniu DOM?
Obojczyk
@Collarbone Zawsze możesz użyć setTimeout () i clearTimeout (), aby opóźnić wywołanie o sekundę po załadowaniu dokumentu.
probie
13 
if ($("element class or id name").css("property") == "value") {
    your code....
}
Sandeep Gupta
źródło
4

Lub, jeśli chcesz uzyskać dostęp do elementu, który ma tę właściwość i nie używa identyfikatora, możesz skorzystać z tej trasy:

$("img").each(function () {
        if ($(this).css("float") == "left") { $(this).addClass("left"); }
        if ($(this).css("float") == "right") { $(this).addClass("right"); }
    })
kelseedev
źródło
1

znalazłem jedno rozwiązanie:

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

ale jakoś wierzę, że jest lepszy sposób!

0100110010101
źródło
1

Pytanie dotyczy dwóch różnych rzeczy:

  1. Element ma określoną klasę
  2. Element ma określony styl.

Odpowiedziano już na drugie pytanie. W przypadku pierwszego zrobiłbym to w ten sposób:

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