jQuery min-width与width的区别：如何移除px？

Question

尝试一些基本的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')) {
  ...
}

- Dan

Answer 1

使用replace()函数：

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

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

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

- James Hill

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

- Alex Yatkevich

---

jQuery.isNaN 应该简写为 isNaN。我知道这篇帖子已经很旧了，但是这个答案是迄今为止最好的。 - Nahydrin

Answer 3

通过一些字符串操作去掉“px”，然后使用parseInt将其转换为数字：

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

- Mrchief

Answer 4

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

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

不要忘记给parseInt函数传入第二个参数。

- FishBasketGordo

Answer 5

使用substring从min-width返回的值中去除px。

- Samir Adel

---

它仍然会是一个字符串。 - pimvdb

但是字符串是有效的，可以对它执行任何操作。 - Samir Adel

你想用结果做什么？！ - Samir Adel

我只是想说'50px'.substring(0, 2) + 1 === '501'。 - pimvdb

Answer 6

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

- citizen conn