javascript - 在javascript中获取div位置（顶部）？

Question

我使用一个 div 在 css 中设置高度top:-26px;。我有其他 div 其他地方我想与该 div 对齐。我注意到在 jquery 写作中.css('top')得到了我的 css 而不是 div 的 y 坐标。如何使用 javascript 获得绝对 x,y 位置？

Answer 1

我会给你香草解决方案..不要抱怨..在你的元素中添加一个 [0] 并且它是固定的！:P 希望这会有所帮助。

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left; 

Answer 2

您可以使用jQuery(element).offset().top

希望能帮助到你。

Answer 3

试试这个代码：

function getElementPosition(id) {
    var offsetTrail = document.getElementById(id);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }

    return {
        left: offsetLeft,
        top: offsetTop
    };
}​

它将返回一个带有left和top变量的对象。

如果您使用 JQuery 尝试offset()方法：

var pos = $("#element").offset();
console.log(pos.left)
console.log(pos.top)

Answer 4

跨浏览器安全到 IE 8，甚至可能是 7 或 6：

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
var offsetEl = offset(document.getElementById('some_id'));
console.log(offsetEl.left, offsetEl.top);

短而快，不需要 jQuery。

Answer 5

使用 jQuery(element).offset()

希望能帮助到你。

例如

var elementPosition = jQuery(element).offset();
var elementTopPositon = elementPosition.top;

Answer 6

使用标准 JavaScript：

var elem=document.getElementById("elemID");
var top=elem.offsetTop;
var left=elem.offsetLeft;

使用 jQuery：

var top=$("#elemID").offset().top;
var left=$("#elemID").offset().left;

Answer 7

var MyElement = document.getElementById("...Your_DIV_Control...");

var top = MyElement.getBoundingClientRect().top;