jQuery min-width vs width:如何删除px?

时间:2011-08-02 19:03:49

标签: javascript jquery width css

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

6 个答案:

答案 0 :(得分:21)

使用replace()

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

或者,您可以使用parseInt函数:

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

答案 1 :(得分:9)

更好的方法是使用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()) {

答案 2 :(得分:2)

删除“px”然后使用parseInt将其作为数字进行一些字符串操作:

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

答案 3 :(得分:2)

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

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

(不要忘记parseInt的第二个参数。)

答案 4 :(得分:0)

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

答案 5 :(得分:0)

将子字符串用于从最小宽度返回的值以删除px