Получение точной позиции div

Question

Я хочу получить точные позиции 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 или любой другой метод. Заранее спасибо!.

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>