jQuery min-width vs width：如何删除像素？答案

【问题标题】：jQuery min-width vs width: How to remove px?jQuery min-width vs width：如何删除像素？
【发布时间】：2011-10-18 12:47:47
【问题描述】：

在这里尝试一些基本的 jQuery 和 JavaScript。

.width() 给了我一个整数值。 .css('min-width') 给了我一个以 px 结尾的值。因此，我无法按原样对此进行数学计算。建议的解决方法是什么？

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')) {
  ...
}

【问题讨论】：

标签： javascript jquery width css

【解决方案1】：

使用replace():

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

或者，您可以使用parseInt 函数：

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

【讨论】：

【解决方案2】：

更好的方法是使用parseInt。 jQuery 函数 .width() 和 .height() 工作得很好。

另外，最好将这些值的获取封装在独立函数中：

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

像这样：

(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);

你的代码会变成：

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()) {

【讨论】：

jQuery.isNaN 应该只是 isNaN。我知道这篇文章很旧，但这个答案是迄今为止最好的。

【解决方案3】：

一些字符串操作来删除“px”，然后使用parseInt 将其作为数字获取：

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

【讨论】：

【解决方案4】：

如果您首先将返回值从.css('min-width') 传递给parseInt，它将为您删除“px”。

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

（不要忘记parseInt的第二个参数。）

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

使用从最小宽度返回的值的子字符串来删除像素

【讨论】：

它仍然是一个字符串。
但该字符串是一个可以对其进行任何操作的有效字符串
你想用结果做什么？！
我的意思是'50px'.substring(0, 2) + 1 === '501'。