jQuery kiểm tra xem phần tử có thuộc tính kiểu cụ thể được xác định nội tuyến

Question

Tôi cần kiểm tra xem một phần tử có thuộc tính css được xác định cho nó hay không, nhưng tôi gặp một số sự cố khi sử dụng hàm jQuery.css().

Thuộc tính tôi đang tìm là chiều rộng.

Nếu phần tử không có một chiều rộng định nghĩa và tôi cố gắng này:

if(base.$element.css('width') !== 'undefined') 

tôi nhận được chiều rộng tính toán của trình duyệt.

Answer 1

Dưới đây là một plugin rất đơn giản (có thể là trong nhiều cần phải cải thiện) Tôi đã ném với nhau rằng sẽ giúp bạn có được giá trị của một kiểu inline tài sản (và trở undefined nếu tài sản đó không được tìm thấy):

​(function ($) { 
    $.fn.inlineStyle = function (prop) { 
     var styles = this.attr("style"), 
      value; 
     styles && styles.split(";").forEach(function (e) { 
      var style = e.split(":"); 
      if ($.trim(style[0]) === prop) { 
       value = style[1];   
      }      
     }); 
     return value; 
    }; 
}(jQuery)); 

Bạn có thể gọi nó như thế này:

//Returns value of "width" property or `undefined` 
var width = $("#someElem").inlineStyle("width"); 

Đây là working example.

Lưu ý rằng nó sẽ chỉ trả về giá trị cho thành phần đầu tiên trong tập hợp phù hợp.

Kể từ khi nó trả undefined khi đó toạ lạc không tìm thấy, bạn có thể sử dụng nó trong tình huống của bạn như thế này:

if (base.$element.inlineStyle("width")) { 
    // It has a `width` property! 
} 

---

Cập nhật

Dưới đây là một nhiều, phiên bản ngắn hơn nhiều . Tôi nhận ra rằng prop("style") trả về một đối tượng, không phải là một chuỗi và các thuộc tính của đối tượng đó tương ứng với các thuộc tính kiểu có sẵn. Vì vậy, bạn chỉ có thể làm điều này:

(function ($) { 
    $.fn.inlineStyle = function (prop) { 
     return this.prop("style")[$.camelCase(prop)]; 
    }; 
}(jQuery)); 

Bạn có thể muốn thay thế việc sử dụng các $.camelCase với một chức năng tùy chỉnh camelcase, kể từ khi một trong jQuery dường như được cung cấp tài liệu và có lẽ là không tốt để dựa vào. Tôi chỉ sử dụng nó ở đây vì nó ngắn hơn.

Đây là số working example của tài khoản đó. Lưu ý rằng trong trường hợp này, giá trị trả về sẽ là chuỗi trống nếu kiểu không được tìm thấy trên phần tử. Điều đó sẽ vẫn được đánh giá là false, vì vậy câu lệnh trên if sẽ vẫn hoạt động.

Answer 2

Sử dụng .attr để kiểm tra thuộc tính style.

if(base.$element.attr('style').length > 0) { 
    //... 
} 

Nếu bạn quan tâm về chiều rộng, sau đó

if(base.$element.attr('style').indexOf('width') !== -1) { 
    //... 
} 

Answer 3

Matthew bạn có thể kiểm tra xem thuộc tính style là undefined hay không

var attr = $(this).attr('style'); 
    if (typeof attr !== 'undefined') { 
    } 

Answer 4

Tại sao không chỉ:

var $el = $('element[style*="width"]'); 

Và sau đó bạn có thể thử nghiệm nó với:

if ($el.length) { 
    //... 
} 

Answer 5

Kiểm tra "chiều rộng" ví dụ:

if ($(element).prop("style")["width"] !== '') 
{...}