获取 div 的确切位置答案

【问题标题】：Getting the exact position of the div获取 div 的确切位置
【发布时间】：2015-01-09 04:40:28
【问题描述】：

我想使用类名获取 div 的确切位置。这是屏幕截图。。我正在寻找 div 位置的脚本以黄色突出显示，而我正在寻找的 div 在底部突出显示为红色。由于我的脚本放置在 div 上方，所以我正在查找文档的父 div，然后将 div 类与我正在寻找的 div 类进行比较，这就是我获得职位的方式。位置不准确。例如，如果 div 的顶部和左侧位置是 50,150，那么我会得到 55,155。

function getPosition(element) {
            var xPosition = 0;
            var yPosition = 0;
            var left = 0;
            var top = 0;
            var i = 0;
            while (element) {
                xPosition = (element.offsetLeft);
                yPosition = (element.offsetTop);
                console.log("TOP Pos: "+yPosition+"Left Pos: "+xPosition);
                if (i == 1) {
                    left = xPosition;
                    top = yPosition;
               }
                element = element.offsetParent;
                i++;
            }
            return {
                x: left,
                y: top
            };
        }

这就是我使用这种方法的方式。

 function ReadDivPos(selector) {
            var _divPos = "";
            var parentDoc = window;
            while (parentDoc !== parentDoc.parent) {
                parentDoc = parentDoc.parent;
            }
            parentDoc = parentDoc.document;
            var parentDiv = parentDoc.getElementsByTagName('div');
            var divs = [];
            for (var i = 0; i < parentDiv.length; i++) {
                if (parentDiv[i].className == "content") {
                    var pos = getPosition(parentDiv[i]);
                    var x = pos["x"];
                    var y = pos["y"];
                    console.log("Values+ Top: " + y + " Left: " + x);
                    var w = parentDiv[i].offsetWidth;
                    _divPos += x + "," + w + "," + y + "," + (x + w) + ","+window.screen.availWidth+"\\n";
                }
            }
            console.log("Values+ x: " + _divPos);
            return _divPos;
        }

这工作正常，但我只是想知道是否有任何其他更好的方法可以使用 jquery 或任何其他方法完成它。提前致谢！

【问题讨论】：

如果你试图检索一个元素相对于文档的位置，你可以使用 jQuery.offset api.jquery.com/offset 或者如果相对于它最近定位的父元素，那么使用 jQuery.position api.jquery.com/position
我不明白为什么有人可以给我-1

标签： javascript jquery html css css-position

【解决方案1】：

见：

$(function() {
  var x = $(".target").offset().left,
      y = $(".target").offset().top;
  
  $(".target").html("x: " + x + " y: " + y);
});

body
{
  padding: 0;
}

.target
{
  background-color: lightgreen;
  width: 7em;
  height: 7em;
  line-height: 7em;
  text-align: center;
  left: 100px;
  top: 20px;
  font-family: Calibri;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>

【讨论】：