Question

我想使用其类名获取div的确切位置。这是截图。 screenshot 。我找到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或任何其他方法完成它。提前谢谢！。

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的确切位置

1 个答案: