Get css top value as number not as string

Question

In jQuery you can get the top position relative to the parent as a number  but you can not  get the css top value as a number if it was set in px  Say I have the following    elem    position relative    top 10px          lt div gt    Bla text bla this takes op vertical space        lt div id  elem  gt bla lt  div gt   lt  div gt          elem   position   top    Returns the number  10  the vertical space took by the text       elem   css  top      Returns the string  10px    But I want to have the css top property as the number 10  How would one achieve this

User · Answer

A slightly more practical efficient plugin based on Ivan Castellanos  answer  which was based on M4N s answer   Using    0 will convert Nan to 0 without the testing step   I ve also provided float and int variations to suit the intended use   jQuery fn cssInt   function  prop        return parseInt this css prop   10     0      jQuery fn cssFloat   function  prop        return parseFloat this css prop      0       Usage       elem   cssInt  top          e g  returns 123 as an int     elem   cssFloat  top        e g  Returns 123 45 as a float   Test fiddle on http   jsfiddle net TrueBlueAussie E5LTu

User · Answer

You can use the parseInt   function to convert the string to a number  e g   parseInt     elem   css  top       Update   as suggested by Ben   You should give the radix too   parseInt     elem   css  top    10     Forces it to be parsed as a decimal number  otherwise strings beginning with  0  might be parsed as an octal number  might depend on the browser used

User · Answer

A slightly more practical efficient plugin based on Ivan Castellanos  answer  which was based on M4N s answer   Using    0 will convert Nan to 0 without the testing step   I ve also provided float and int variations to suit the intended use   jQuery fn cssInt   function  prop        return parseInt this css prop   10     0      jQuery fn cssFloat   function  prop        return parseFloat this css prop      0       Usage       elem   cssInt  top          e g  returns 123 as an int     elem   cssFloat  top        e g  Returns 123 45 as a float   Test fiddle on http   jsfiddle net TrueBlueAussie E5LTu

User · Answer

You can use the parseInt   function to convert the string to a number  e g   parseInt     elem   css  top       Update   as suggested by Ben   You should give the radix too   parseInt     elem   css  top    10     Forces it to be parsed as a decimal number  otherwise strings beginning with  0  might be parsed as an octal number  might depend on the browser used

User · Answer

A jQuery plugin based on M4N s answer  jQuery fn cssNumber   function prop       var v   parseInt this css prop  10       return isNaN v    0   v       So then you just use this method to get number values      logo   cssNumber  top

User · Answer

You can use the parseInt   function to convert the string to a number  e g   parseInt     elem   css  top       Update   as suggested by Ben   You should give the radix too   parseInt     elem   css  top    10     Forces it to be parsed as a decimal number  otherwise strings beginning with  0  might be parsed as an octal number  might depend on the browser used

User · Answer

You can use the parseInt   function to convert the string to a number  e g   parseInt     elem   css  top       Update   as suggested by Ben   You should give the radix too   parseInt     elem   css  top    10     Forces it to be parsed as a decimal number  otherwise strings beginning with  0  might be parsed as an octal number  might depend on the browser used

User · Answer

A jQuery plugin based on M4N s answer  jQuery fn cssNumber   function prop       var v   parseInt this css prop  10       return isNaN v    0   v       So then you just use this method to get number values      logo   cssNumber  top

[javascript] Get css top value as number not as string?

Usage:

Test fiddle on http://jsfiddle.net/TrueBlueAussie/E5LTu/

Examples related to javascript

Examples related to jquery

Examples related to css