javascript - Get css top value as number not as string? - Stack Overflow

admin管理员组

文章数量:1134247

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;
 }

<div>
  Bla text bla this takes op vertical space....
  <div id='elem'>bla</div>
</div>

$('#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?

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;
 }

<div>
  Bla text bla this takes op vertical space....
  <div id='elem'>bla</div>
</div>

$('#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?

• javascript
• jquery
• css

Share Improve this question Follow edited Jun 2, 2016 at 14:37 Albzi 15.6k66 gold badges4848 silver badges6767 bronze badges asked Dec 27, 2008 at 17:04 Pim JagerPim Jager 32.1k1717 gold badges7474 silver badges9999 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 231

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).

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")

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/

Its not work for me ,also i got the Top as String and remove the Pixel

let item = document.querySelector('.myclass');

let IngTop = parseInt(getComputedStyle(item).top.replace('px',''));

.myclass{
top : 150px
}

<div class='myclass'></div>

You could use a Proxy as follows:

const pxStyles = {
    get(target, prop) {
        let val = target.style[prop];
        if (!val.endsWith('px')) {
            throw Exception(`style.${prop}: doesn't have a pixel value: ${val}`)
        }
        return parseFloat(val.substring(0, val.length - 2));
    },
    set(target, prop, value) {
        target.style[prop] = value + 'px';
        return true;
    }
}

const elem_px = new Proxy(document.getElementById('elem'), pxStyles);
elem_px.top += 1234;

本文标签： javascriptGet css top value as number not as stringStack Overflow