Jquery: Cách kiểm tra xem phần tử có lớp / kiểu css nhất định hay không


85

Tôi có một div:

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

Có cách nào để kiểm tra xem phần tử nhất định:

$("#someElement") 

có một lớp cụ thể (trong trường hợp của tôi là "test").

Ngoài ra, có cách nào để kiểm tra xem phần tử en có một kiểu nào đó không? Trong ví dụ này, tôi muốn biết liệu phần tử có " position: absolute" hay không.

Cảm ơn rât nhiều!


14
không chắc chắn nếu it'sd câu hỏi hoặc câu trả lời đó là sai, nhưng câu hỏi có style = "test", và vẻ câu trả lời cho class = "test"
wheresrhys

1
Tôi đoán là, câu hỏi sai, vì anh ta đã đánh dấu câu trả lời sai là đúng; nhưng bất kể, sau khi xem các phiếu bầu, tôi nghĩ hầu hết mọi người đều đã vấp ngã ở đây để tìm câu trả lời chính xác cho câu hỏi sai này ... ờ, nếu điều đó có ý nghĩa ... Ý tôi là câu trả lời từ DrJokepu. Đó là lý do tại sao tôi ở đây ít nhất.
BrainSlugs83

Câu trả lời:


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

75
Điều này không trả lời câu hỏi như đã hỏi - hãy xem câu trả lời của DrJokepu bên dưới.
Ryan Burney

281

Kiểu CSS là các cặp khóa-giá trị, không chỉ là "thẻ". Theo mặc định, mỗi phần tử có một tập hợp đầy đủ các kiểu CSS được gán cho nó, hầu hết chúng được mặc định sử dụng mặc định của trình duyệt và một số trong số chúng được xác định lại rõ ràng trong CSS stylesheet.

Để nhận giá trị được gán cho một mục CSS cụ thể của một phần tử và so sánh nó:

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

Nếu bạn không xác định lại kiểu, bạn sẽ nhận được mặc định của trình duyệt cho phần tử cụ thể đó.


3
Không có cách nào để làm điều đó với một bộ chọn?
BrainSlugs83

với điều này bạn có thể thấy thuộc tính thực tế là gì, điều tôi cần biết là thuộc tính này đang được thiết lập trực tiếp hay nó được kế thừa từ css style / browser ... có được không?
ante.sabo

Dường như không hoạt động đối với trường hợp nếu giá trị DOM thay đổi / css của một đối tượng thay đổi sau khi tải trang. Bất kỳ ý tưởng làm thế nào để làm cho nó xem các thay đổi css sau khi DOM tải?
Collarbone

@Collarbone Bạn luôn có thể sử dụng setTimeout () và clearTimeout () để trì hoãn cuộc gọi trong một giây hoặc lâu hơn sau khi tải xong tài liệu.
probie

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

4

Hoặc, nếu bạn cần truy cập vào phần tử có thuộc tính đó và nó không sử dụng id, bạn có thể đi theo con đường này:

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

1

tôi đã tìm thấy một giải pháp:

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

nhưng bằng cách nào đó tôi tin rằng có một cách tốt hơn!


1

Câu hỏi yêu cầu hai điều khác nhau:

  1. Một phần tử có một số lớp nhất định
  2. Một phần tử có phong cách nhất định.

Câu hỏi thứ hai đã được trả lời. Đối với cái đầu tiên, tôi sẽ làm theo cách này:

if($("#someElement").is(".test")){
    // Has class test assigned, eventually combined with other classes
}
else{
    // Does not have it
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.