获取 div 的确切位置

Question

我想使用 class 名称获取 div 的确切位置。这是屏幕截图。。我正在寻找 div 位置的脚本以黄色突出显示，而我正在寻找的 div 在底部突出显示为红色。由于我的脚本位于 div 上方，因此我找到了文档的父 div，然后将 div class 与 div class 我正在寻找，这就是我获得职位的方式。位置不准确。例如，如果 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 或任何其他方法来完成它。提前致谢！

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

获取 div 的确切位置

Getting the exact position of the div

html

javascript

css

jquery

css-position