如何使用javascript获取左上角x和y坐标答案

【问题标题】：how to get the top left x and y coordinate using javascript如何使用javascript获取左上角x和y坐标
【发布时间】：2025-12-17 23:40:01
【问题描述】：

我知道我们可以使用 clientWidth 和 clientHeight 来获取宽度和高度，但是如何计算元素的左上 x 和左上 y 位置？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

Retrieve the position (X,Y) of an HTML element

Find X/Y of an HTML element with JavaScript

这两个链接应该会有所帮助。

【讨论】：

【解决方案2】：

使用 jQuery，您可以通过调用 .position() 函数来做到这一点。喜欢：

$('#mydiv').position().left;
$('#mydiv').position().top;

这是最可靠的方法，因为它已经计算了检查元素及其父元素的 CSS 的位置。

您可以在此处查看完整的实现：

http://code.jquery.com/jquery-1.7.1.js 在第 9077 行

【讨论】：

【解决方案3】：

要获得顶部，您需要添加元素的offsetTop 和元素的offsetParent 的offsetTop。从 DOM 一路向上到 document。这说明了绝对、相对和固定定位。要获得左侧，请对 offsetLeft 执行相同操作。

这两个函数将两个属性添加到Element、documentOffsetTop 和documentOffsetLeft，这将获取任何元素的顶部/左侧：

window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

这个演示展示了元素布局的几种组合，比较了 documentOffsetTop 和 jQuery 的 offset().top。

演示：http://jsfiddle.net/ThinkingStiff/3G7EZ/

脚本：

window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

var line = document.getElementsByClassName( 'grid-line' )[0],
    grid = document.getElementById( 'grid' );

for( var index = 2; index < 100; index++ ) {
    var copy = line.cloneNode();
    copy.textContent = ( index * 10 );
    grid.appendChild( copy );
};

var offset = document.getElementById( 'absolute' );
offset.textContent = 'absolute: ' 
    + offset.documentOffsetTop + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'static' );
offset.textContent = 'static: ' 
    + offset.documentOffsetTop + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'static2' );
offset.textContent = 'static: ' 
    + offset.documentOffsetTop + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'relative' );
offset.textContent = 'relative: ' 
    + offset.documentOffsetTop + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-side' );
offset.textContent = 'fixed/absolute (side): ' 
    + offset.documentOffsetTop + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-top' );
offset.textContent = 'fixed/absolute (top): ' 
    + offset.documentOffsetTop + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-bottom' );
offset.textContent = 'fixed/absolute (bottom): ' 
    + offset.documentOffsetTop + ', $' 
    + $( offset ).offset().top;

offset = document.querySelectorAll( '#relative-wrapped-absolute div' )[0];
offset.textContent = 'absolute/relative/static (absolute/relative wrapped): ' 
    + offset.documentOffsetTop + ', $' 
    + $( offset ).offset().top;

offset = document.querySelectorAll( '#static-wrapped-static div' )[0];
offset.textContent = 'static (static wrapped): ' 
    + offset.documentOffsetTop  + ', $' 
    + $( offset ).offset().top;

HTML：

<div id="static" class="offset">0</div>
<div id="static2" class="offset">0</div>
<div id="static-wrapped-static"><br /><div class="offset">0</div></div>
<div id="absolute" class="offset">0</div>
<div id="relative" class="offset">0</div>
<div id="fixed-side" class="offset">0</div>
<div id="fixed-top" class="offset">0</div>
<div id="fixed-bottom" class="offset">0</div>
<div style="position: relative;"><div id="relative-wrapped-absolute"><div class="offset">0</div></div></div>

<div id="grid"><div class="grid-line">10</div></div>

CSS：

body {padding-left: 12px;}

#absolute {
    top: 100px;
    position: absolute;
}

#relative {
    top: 150px;
    position: relative;
}

#fixed-side {
    right: 0;
    position: fixed;
}

#fixed-top {
    left: 50%;
    position: fixed;
    top: 0;
}

#fixed-bottom {
    left: 50%;
    position: fixed;
    bottom: 0;
}

#relative-wrapped-absolute {
    top: 8px;
    position: relative;
}

#relative-wrapped-absolute div {
    position: absolute;
    top: 20px;
}

.offset {
    border: 1px solid black;
}

#grid {
    height: 100%;
    left: 0;
    position: absolute;
    top: 1px;
    width: 100%;
    z-index: -1;
}

.grid-line {
    border-bottom: 1px solid lightgray;
    font-size: 8px;
    height: 9px;
    line-height: 20px;
}

输出：

【讨论】：

【解决方案4】：

您是否需要特定元素的 x 和 y。

$("#bnElement").offset().left;
$("#bnElement").offset().top;

看看下面的帖子jQuery x y document coordinates of DOM object 问候

【讨论】：

【解决方案5】：

也许这可以帮助你。？！

HTML

    <div>
    <p>Hello</p>
    </div>
    <p></p>

CSS

div { padding: 50px;}
p { margin-left:10px; }

JS

    var p = $("p:first");
    var position = p.position();
    $("p:last").text( "left: " + position.left + ", top: " + position.top );

演示：http://jsfiddle.net/bZezzz/TvMMv/

【讨论】：

【解决方案6】：

使用querySelectorAll() 方法

    var domTree = [];
var allelems = document.querySelectorAll(tagsCheck ); // for all tags use --> '*'

for(var i = 0; i < allTags.length; i++){
    console.log(i+'  '+'Tag : '+ allTags[i].nodeName+'#'+allTags[i].id);  // getPath(allTags[i]);

    getPosition(allTags[i]);
    console.log('Coordinates  : {top   : '+allTags[i].getBoundingClientRect().top+', left   : '+allTags[i].getBoundingClientRect().left+' } ');

    console.log('Dimensions offset       :  {width : '+allTags[i].offsetWidth+', height : '+allTags[i].offsetHeight+' } ');
    console.log('Dimensions style  Q     :  {width : '+allTags[i].style.width+', height : '+allTags[i].style.height+' } '); 

    var singleTag = [];
    var jsonData = getTagInfo(allelems[i]); //singleTag.push(getFullXPath(allelems[i]));
    singleTag.push(jsonData);
    domTree.push(singleTag);
console.log(singleTag);

}
function getTagInfo(element){ 
    return '{ \"Xpath\": \"'+ getFullXPath(element) + '\", \"left\": '+element.getBoundingClientRect().left+',\"top\":  '+element.getBoundingClientRect().top+
    ',\"width\": '+element.offsetWidth+',\"height\" : '+element.offsetHeight+'}';
}

使用getElementsByTagName() 和getComputedStyle()

function getElementDimensions(tagsCheck){
    var allElem = document.getElementsByTagName('*'); 
    for(i = 0, j = 0; i < allElem.length; i++) { 
        var elemstyle= window.getComputedStyle(allElem[i], null);
        if( tagsCheck.indexOf( allElem[i].tagName ) > -1 ){
            console.log(i+'  '+'Tag : '+allElem[i].tagName+'[@id : '+allElem[i].id);
            console.log('Dimensions style  E     :  {width : '+elemstyle.width+', height : '+elemstyle.height+' } '); 
        }
    }
}

HTML 元素的position 和XPath

function getPosition(element){ 
    var xPosition = 0; 
    var yPosition = 0; 
        while(element) { 
            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
            yPosition += (element.offsetTop - element.scrollTop + element.clientTop); 
        element = element.offsetParent; 
        }
    console.log('GetPosition  : {top   : '+yPosition+', left   : '+xPosition+' } ');
}

【讨论】：

【解决方案7】：

我真的很喜欢jquery.simulate 实现

function findCorner(elem) {
    var offset,
        document = $(elem.ownerDocument);
    elem = $(elem);
    offset = elem.offset();

    return {
        x: offset.left - document.scrollLeft(),
        y: offset.top - document.scrollTop()
    };
}

似乎捕捉了很多场景。它为您带来相对于屏幕的位置。所以如果我滚动，某些项目可能处于负位置。这对于使用拖放的自动化测试很有用。

你可以很容易地用 jquery 包装它以获得像这样的酷语法

$.fn.findCorner = function(){
    if ( this.length > 1 ) {
        return this.map(function(){ return findCorner(this); })
    } else {
        return findCorner(this[0]);
    }
};

$('div').findCorner().. 也是如此。

【讨论】：