Javascript：查找div相对于视口的位置，与滚动无关

Question

Hi I have a div that is fixed to the middle of the screen. like a modal. It contains other elements withing. How do i find the position of the div as well as some of the elements inside it. The css class for the div is

.timepicker {
    box-shadow: 0 5px 5px -3px lightgray, 0 8px 10px 1px lightgray, 0px 3px 14px 2px lightgray;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
    min-width: 280px;
   position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    display: table;
    -ms-border-radius: 3px;
    border-radius: 3px;
    line-height: normal;
    overflow: hidden;
    z-index: 99999;
}

Answer 1

You can use the getBoundingClientRect method of an element to get the position. Here is an example:

 var pos = document.getElementById('myDiv').getBoundingClientRect(); console.log(pos.left, pos.top); 

 #myDiv { position:fixed; left:150px; top:110px; } 

 <div id="myDiv"> Fixed position </div> 

The left and top attributes of the returned object will give you the x and y coordinates, but you can also access the bottom and right attributes to get the distance from the bottom of the viewport and the distance from the right of the viewport.

Answer 2

You can use vanilla javascript by first getting the div element, then it is simply a case of referencing the .offsetLeft and .offsetTop properties respectively of the returned <div> :

 var div = document.querySelector('div.timepicker'); div.offsetLeft; // x position div.offsetTop); // y position 

Here's a snippet for you to try:

 var div = document.querySelector('div.timepicker'); console.log('x position: ' + div.offsetLeft); // x position console.log('y position: ' + div.offsetTop); // y position 

 .timepicker { box-shadow: 0 5px 5px -3px lightgray, 0 8px 10px 1px lightgray, 0px 3px 14px 2px lightgray; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); font-family: "Roboto", "Helvetica", "Arial", sans-serif !important; min-width: 280px; position: fixed; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; display: table; -ms-border-radius: 3px; border-radius: 3px; line-height: normal; overflow: hidden; z-index: 99999; } 

 <div class='timepicker'>DIV</div> 

Answer 3

function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return [curleft, curtop];
  }
}

Use this function to find the position of the div:

findPos(document.getElementById('time'));

Reference: https://www.quirksmode.org/js/findpos.html