Question

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

Answer 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

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

Answer 2

要获得顶部，您需要添加元素offsetTop和元素offsetParent的{{1}}。在DOM中一直到offsetTop执行此操作。这说明了绝对，相对和固定的定位。要离开，请使用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 ); } } );与jQuery的documentOffsetTop进行了比较。

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

脚本：

offset().top

HTML：

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;

CSS：

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

输出：

enter image description here

Answer 3

使用jQuery，您可以通过调用.position（）函数来完成此操作。像：

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

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

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

在第9077行

http://code.jquery.com/jquery-1.7.1.js

Answer 4

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

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

请查看以下帖子jQuery x y document coordinates of DOM object 问候

Answer 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/

Answer 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+' } ');
}

Answer 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()
    };
}

似乎捕获了很多场景。它会为您提供相对于屏幕的位置..因此，如果我滚动，某些项目可能处于负面位置。这对于使用drag＆amp; amp;的自动化测试很有用。下降。

您可以使用jquery轻松地将其包装起来，以获得酷炫的语法，如此

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

所以$('div').findCorner() ..

如何使用javascript获得左上角的x和y坐标

7 个答案: