Chiều rộng và chiều rộng tối thiểu của jQuery: Cách xóa px?

Question

Thử một số jQuery và JavaScript cơ bản tại đây.

.width() mang lại cho tôi giá trị số nguyên. .css('min-width') mang lại cho tôi giá trị kết thúc bằng px. Vì vậy, tôi không thể làm toán học như thế này. Công việc được đề xuất là gì?

alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width()); 
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width')); 
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width')); 

if ($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width')) { 
    ... 
} 

Answer 1

Sử dụng replace():

alert($('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width').replace('px', '')); 

Ngoài ra, bạn có thể sử dụng parseInt chức năng:

alert(parseInt('1px')); //Result: 1 

Answer 2

Một số chuỗi thao tác để loại bỏ 'px' và sau đó sử dụng parseInt để có được nó như là một số:

var minWidth = parseInt($('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width').replace('px', ''), 10) 

Answer 3

alert($('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width').substring(0,indexOf('px')); 

Answer 4

Sử dụng chuỗi giá trị trở về từ các min-width để loại bỏ các px

Answer 5

Nếu bạn vượt qua giá trị trả về từ .css('min-width') để parseInt đầu tiên, nó sẽ loại bỏ các "px" cho bạn.

parseInt(
    $('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width'), 
    10 
); 

(Đừng quên tham số thứ hai để parseInt.)

Answer 6

Cách tốt hơn là sử dụng parseInt. Các hàm jQuery .width() và .height() hoạt động khá tốt.

Ngoài ra, nó sẽ là tốt để đóng gói quyến rũ của các giá trị này trong các chức năng độc lập:

• .minHeight(), .minHeight(size), .minHeight(function())
• .maxHeight(), ...
• .minWidth(), ...
• .maxWidth(), ...

Như thế này:

(function($, undefined) { 

    var oldPlugins = {}; 

    $.each([ "min", "max" ], function(_, name) { 

     $.each([ "Width", "Height" ], function(_, dimension) { 

      var type = name + dimension, 
       cssProperty = [name, dimension.toLowerCase()].join('-'); 

      oldPlugins[ type ] = $.fn[ type ]; 

      $.fn[ type ] = function(size) { 
       var elem = this[0]; 
       if (!elem) { 
        return !size ? null : this; 
       } 

       if ($.isFunction(size)) { 
        return this.each(function(i) { 
         var $self = $(this); 
         $self[ type ](size.call(this, i, $self[ type ]())); 
        }); 
       } 

       if (size === undefined) { 
        var orig = $.css(elem, cssProperty), 
         ret = parseFloat(orig); 

        return jQuery.isNaN(ret) ? orig : ret; 
       } else { 
        return this.css(cssProperty, typeof size === "string" ? size : size + "px"); 
       } 
      }; 

     }); 

    }); 

})(jQuery); 

Và mã của bạn sẽ chuyển sang:

alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width()); 
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').minWidth()); 
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').minWidth()); 
if ($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').minWidth()) {