jquery if (css_attribute = giá trị)

Question

Có thể làm một câu lệnh if trong javascript/jquery để xác định:

Nếu giá trị của thuộc tính css một yếu tố nào đó là tương đương với một giá trị nhất định?

như:

if($('.box').css(background-color = blue)){ 
    // do this... 
} 

Answer 1

Các css phương pháp JQuery, khi đưa ra chỉ một tham số, sẽ trả về giá trị cho cho paramenter. Bạn có thể thử này:

var color = $('.box').css('background-color'); 
if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack 
    alert("it's blue!\nColor detected: " + color); 

Các mẫu ở trên sẽ chỉ làm việc cho các phần tử đầu tiên trong bộ chọn JQuery, do đó bạn nên sử dụng phương pháp .each JQuery để lặp qua toàn bộ chọn nếu bạn có nhiều hơn một phần tử trong nó .

Xin lưu ý rằng phương thức JQuery .css trả về kết hợp RGB trong hầu hết các trình duyệt (ngoại trừ IE), do đó kiểm tra nó với chuỗi như blue sẽ không đủ cho các trình duyệt không phải IE. Bạn có thể kiểm tra điều đó trong JQuery API site và my fiddle.

Và đây là với đúng .each lặp:

$('.box').each(function(i){ 
    var color = $(this).css('background-color'); 
    if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack 
     alert("div " + i + " is blue!\nColor detected: " + color); 
});​ 

JSFiddle

---

Edit: hơn một năm và một nửa sau, tôi cảm thấy như câu trả lời này xứng đáng một bản cập nhật .

Đối với hầu hết các trường hợp sử dụng, tôi khuyên bạn nên sử dụng một lớp CSS:

.blue { 
    color: blue; 
} 

Điều này cho phép việc sử dụng các addClass(), removeClass(), toggleClass() phương pháp để thao tác, cũng như hasClass() để kiểm tra:

if ($('#myElem').hasClass('blue')) { 
    //it has the .blue class! 
} 

Công cụ này hoạt động liên tục trong tất cả các trình duyệt mà không cần hack và cộng thêm bạn sẽ tách mối quan tâm tốt hơn - nghĩa là nếu kiểu dáng của bạn thay đổi, hãy nói .blue { color: lightblue; }, JS sẽ tiếp tục làm việc mà không cần sửa đổi. Lưu ý: tất nhiên, cách tiếp cận này không phù hợp với một vài trường hợp hiếm hoi khi giá trị màu được tạo động (ví dụ: sử dụng Math.random() hoặc chọn giá trị màu khỏi pixel canvas), trong những trường hợp hiếm hoi này bạn vẫn có thể sử dụng giải pháp đầu tiên trong câu trả lời này.

Answer 2

Bạn sẽ có thể làm điều gì đó như thế này:

if ($('.box').css('background-color') === 'blue') 
{// do this...} 

Answer 3

boxes = $('.box'); 
for(var i = 0;i<boxes.length;i++) { 
    if(boxes[i].style.backgroundColor =="blue") { 
    //do stuff 
    } 
} 

Answer 4

séc trị giá khoảng trống trong

if($(this).css('color') == 'rgb(251, 176, 64)') 

"SPACE SAU COMA"

Answer 5

Không có ở trên dường như làm việc ở đây trong năm 2015. Kiểm tra màu sắc của một liên kết chống lại: màu đã đến thăm có vẻ là đúng trong mọi trường hợp trong Chrome cho tôi. Ngoài ra nếu bạn không 'đánh hơi' và thực sự muốn biết nếu một liên kết đã được nhấp trong chuyến thăm của họ tới trang web của bạn tôi đã tìm thấy rằng một đơn giản:

$("a").addClass('visited'); 

và kiểm tra cho lớp hoạt động tốt.

if ($("a").hasClass('visited');){ console.log('do something honorable'); }