2009-07-24 38 views
20

Tôi cần phải tìm một phần tử dựa trên thuộc tính css cụ thể. css được áp dụng nội tuyến và tôi không thể sử dụng lớp học. Có cách nào để đạt được điều này trong jQuery?jQuery tìm theo thuộc tính css nội tuyến

Trả lời

26

Bạn có thể sử dụng một attribute selector

Ví dụ

$(":radio [style*='regular']") 

sẽ trả về một tập bọc của bất kỳ radio đầu vào chứa 'regular' trong thuộc tính phong cách

+1

điều gì sẽ xảy ra nếu chúng ta phải lựa chọn dựa trên hai giá trị 'left: 180px' và' top: 360px'? –

+1

bạn chỉ cần sử dụng nhiều bộ chọn thuộc tính, ví dụ: '$ (" [left = '180px'] [top = '360px'] ")' –

3

Cái gì như:

$('selector').each(function() { 
    if($(this).attr('style').indexOf('font-weight') > -1) { 
     alert('got my attribute'); 
    } 
}); 
+0

.indexOf có thể trả về 0, sẽ được đánh giá là false – mkoryak

+0

@mkoryak - cảm ơn, vừa mới nhận ra, sửa nó. – karim79

1
var ccsStyle="font-weight:bold"; 
var els = []; 
$("*").each(function(){ 
    var st = $(this).attr("style"); 
    if(st.indexOf(cssStyle) > -1) els.push(this); 
}); 
//do stuff with els 
0

Bạn có thể sử dụng lá cờ thuộc tính và sử dụng chứa nếu bạn biết định dạng cụ thể mà nó ở.

$("[style*='position']") 

này sẽ tìm thấy tất cả các yếu tố để xác định thuộc tính vị trí css.

4

Tôi nghĩ bạn có thể viết bộ chọn tùy chỉnh jQuery để thực hiện việc này.

Ví dụ, nếu bạn muốn làm chọn bởi thuộc tính phong cách nhất định, bạn có thể làm:

jQuery.extend(jQuery.expr[':'], { 
    styleEquals: function(a, i, m){ 
     var styles = $(a).attr("style").split(" ") 
     var found = false; 
     for (var i = 0; i < styles.length; i++) { 
      if (styles[i]===m[3]) { 
       found = true; 
       break; 
      } 
     } 
     return found; 
    } 
}); 

Sau đó, nó có thể được sử dụng trong conjuction với bất kỳ chọn khác mà bạn có thể chọn tất cả các yếu tố đầu vào với phong cách nhất định như này:

$('input:styleEquals('width=10px')') 
+1

chức năng này đã được bao gồm trong ngôn ngữ jQuery. tất cả những gì bạn cần là $ ('selector [cssAttribute = value]') –

+0

jquery inbuilt selector chỉ hoạt động nếu nó khớp chính xác, vì vậy nó sẽ chỉ khớp nếu style = "absolute;" không nếu style = "absolute; left". Vì vậy, giải pháp tôi đăng là để tìm tất cả các yếu tố có giá trị tuyệt đối không chỉ đối sánh chính xác – Surya

+0

@ Surya: vâng, tôi đã có một trường hợp xấu của viêm não trực tràng não. Không biết tôi đang nghĩ gì. –

16

Tôi nghĩ đây là giải pháp sạch nhất. Giả sử bạn muốn tìm tất cả các yếu tố mà z-index có giá trị cụ thể:

$('*').filter(function() { return $(this).css('z-index') == 101 }) 
0

Bạn có thể tìm kiếm bất kỳ thuộc tính inline với .attr() .. .attr('attr_name')

http://api.jquery.com/attr/

css_inline_value = $(element).attr('style'); 

if (css_inline_value = search_value) { 
    // do stuff 
} 
3

Vâng, tôi nghĩ cách nhanh nhất và dễ nhất để đạt được kết quả mong muốn là nhắm mục tiêu các kiểu với bộ chọn lớp thuộc tính.

Giống như đã nói trước đây:

$('div.yourClass[style*="background-color:Blue"]).css('color', 'White'); 

Bằng cách đó, chúng tôi nhắm mục tiêu tất cả các div với cùng một lớp có nền màu xanh và nói với họ tất cả để có văn bản màu trắng. Tất nhiên thay vì .css chúng ta có thể sử dụng bất cứ điều gì ở đây, .animate và nói với tất cả các blues được hoạt hình vv Điều này đã giúp tôi rất nhiều với DB quan hệ và những người thiết lập những điều kỳ lạ trong DB.

tôi đã sử dụng được ít generic, và chuỗi mục tiêu với: chứa ... nhưng sau đó ai đó đi vào căn cứ, và thay đổi văn bản và nhãn, và bye bye mã;)

Hy vọng nó giúp.

+0

Có lỗi đánh máy trong mã bạn. '$ ('div.yourClass [style * =" background-color: Blue "]'). css ('màu', 'Trắng');' –

Các vấn đề liên quan