Javascript：在元素的“ top”属性上添加/减去？

Question

I am trying to add some pixels from an element on my page. This is so I can create a new element and place it above it.

 posy = document.getElementById('user').style.top + 20;

But it is returning "50px20", I haven't tried subtracting it yet, but what should I do to prevent it from returning 'px' in it?

Is there a way to do this in jQuery?

Thanks, Alex.

Answer 1

What you are asking is a little confusing. You say you want the top attribute, but this could be the position of the element on the page or the top value of its style. There is a distinct difference. It sounds like you want the position of the element because you are storing the results in posy . This is different than getting the top value of the CSS which will only exist if it has been defined in your stylesheet.

To get the top CSS value in jQuery you would use

$('selector').css('top');

To get the position of the element use jQuery's offset() or position() methods. You probably would want offset.

$('selector').offset().top; //or .left

To fix your returned value for px or em try parseInt.

parseInt(value);

Answer 2

JavaScript's + operator performs concatenation of strings as well as adding of Numbers. This can be pretty confusing, but once you know, it's easy to solve using parseInt :

var posy = parseInt(document.getElementById('user').style.top, 10) + 20;

One other quirk: parseInt(number) doesn't always work as expected. If number is a string of a number start starts with a leading zero (like 0123 ), parseInt will assume it is in base 8.

To make sure it works as expected, use radix : parseInt(number, 10);

PS: mrtsherman has a good point about your underlying intent. And while I agree with his advise to use jQuery, it is possible with plain JavaScript as well:

function findOffsetTop(element) {
    var offset = 0;
    do {
        offset += element.offsetTop;
    } while (element = element.offsetParent);
    return offset;
}

var user = document.getElementById('user');
var posy = findOffsetTop(user) + 20;

(Based on http://www.quirksmode.org/js/findpos.html )

Answer 3

posy = parseInt($('#user').css('top').replace('px', ''), 10) + 20;

Answer 4

Plain Javascript method:

posy = document.getElementById('user').style.top.replace('px','') + 20;

jQuery method:

posy = $('user').css('top').replace('px','')+20;

Answer 5

尝试这个：

posy = parseInt(document.getElementById('user').style.top) + 20;