JQuery min-width vs width: How to remove px?

Question

Try some basic jQuery and JavaScript here.

.width() gives an integer value. .css('min-width') gives me a value ending in px . Therefore, I can not do the math on this, as it is. What is the recommended job?

 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

Use replace() :

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

Alternatively, you can use the parseInt function:

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

Answer 2

It is best to use parseInt . The jQuery .width() and .height() functions work quite well.

In addition, it would be nice to encapsulate a selection of these values ​​in autonomous functions:

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

Like this:

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

And your code will turn into:

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

Answer 3

Some string manipulations to remove "px", and then use parseInt to get it as a number:

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

Answer 4

If you first pass the return value from .css('min-width') to parseInt , it will delete the “px” for you.

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

(Remember the second parameter to parseInt .)

Answer 5

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

Answer 6

Use a substring for the value returned from min-width to remove px