How to get just numeric part of CSS property with jQuery

Question

I need to do a numeric calculation based on CSS properties  However  when I use this to get info     this  css  marginBottom     it returns the value  10px   Is there a trick to just getting the number part of the value no matter whether it is px or   or em or whatever

User · Answer

You can implement this very simple jQuery plugin   Plugin Definition    function           fn cssValue   function p          var result        return isNaN result   parseFloat this css p      0   result           jQuery     It is resistant to NaN values that may occur in old IE version  will return 0 instead   Usage     this  cssValue  marginBottom      Enjoy

User · Answer

Let us assume you have a margin-bottom property set to 20px   20    20em  To get the value as a number there are two options   Option 1   parseInt     some DOM element ID   css  margin-bottom    10     The parseInt   function parses a string and returns an integer  Don t change the 10 found in the above function  known as a  radix   unless you know what you are doing   Example Output will be  20  if margin-bottom set in px  for   and em it will output the relative number based on current Parent Element   Font size   Option 2  I personally prefer this option   parseFloat     some DOM element ID   css  margin-bottom       Example Output will be  20  if margin-bottom set in px  for   and em it will output the relative number based on current Parent Element   Font size   The parseFloat   function parses a string and returns a floating point number   The parseFloat   function determines if the first character in the specified string is a number  If it is  it parses the string until it reaches the end of the number  and returns the number as a number  not as a string   The advantage of Option 2 is that if you get decimal numbers returned  e g  20 32322px  you will get the number returned with the values behind the decimal point  Useful if you need specific numbers returned  for example if your margin-bottom is set in em or

User · Answer

This will clean up all non-digits  non-dots  and not-minus-sign from the string     this  css  marginBottom   replace    - d    g         UPDATED for negative values

User · Answer

With the replace method  your css value is a string  and not a number   This method is more clean  simple  and returns a number    parseFloat   this  css  marginBottom

User · Answer

Should remove units while preserving decimals   var regExp   new RegExp   a-z  A-Z    g    parseFloat   this  css  property   replace regExp

User · Answer

I use a simple jQuery plugin to return the numeric value of any single CSS property   It applies parseFloat to the value returned by jQuery s default css method   Plugin Definition      fn cssNum   function      return parseFloat   fn css apply this arguments        Usage   var element       selector-class    var numericWidth   element cssNum  width     10    px   element css  width   numericWidth

User · Answer

parseint will truncate any decimal values  e g  1 5em gives 1    Try a replace function with regex  e g    this css  marginBottom   replace     d     px pt em       1

User · Answer

this  css  marginBottom   replace  px

User · Answer

For improving accepted answer use this   Number   this  css  marginBottom   replace    - d    g

User · Answer

If it s just for  px  you can also use     this  css  marginBottom   slice 0  -2

User · Answer

use    this  cssUnit  marginBottom      which return an array  first index returns margin bottom s value example 20 for 20px  and second index returns margin bottom s unit example px for 20px

User · Answer

parseInt   this  css  marginBottom    10     parseInt will automatically ignore the units   For example   var marginBottom    10px   marginBottom   parseInt marginBottom  10   alert marginBottom      alerts  10

User · Answer

The simplest way to get the element width without units is    target width     Source   https   api jquery com width  width2

User · Answer

Id go for   Math abs parseFloat   this  css  property

User · Answer

parseFloat   this  css  marginBottom      Even if marginBottom defined in em  the value inside of parseFloat above will be in px  as it s a calculated CSS property

[javascript] How to get just numeric part of CSS property with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to parsing