div의 정확한 위치 얻기

Question

div 클래스의 정확한 위치를 얻고 싶습니다. 다음은 스크린 샷입니다. . div 위치를 찾는 내 스크립트는 노란색으로 강조 표시되고 div는 찾고있는 빨간색 아래쪽에 강조 표시됩니다. 내 스크립트가 div 위에 놓이기 때문에 문서의 부모 div를 찾고 div 클래스와 div 클래스를 비교하면 찾고있는 위치가 어떻게되는지를 알 수 있습니다. 위치가 정확하지 않습니다. 예를 들어 div의 Top 및 Left 위치가 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 
      }; 
     } 

그리고이 방법을 사용하고 있습니다. 이 JQuery와 또는 다른 방법을 사용하여 수행 할 수있는 다른 더 좋은 방법이

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

이것은 잘 작동하지만 난 그냥 궁금하고있다. 사전에 감사드립니다!.

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>