Question

嗨我有一个固定在屏幕中间的div。像一个模态。它包含其他元素。我如何找到div的位置以及其中的一些元素。 div的css类是

.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

您可以使用元素的getBoundingClientRect方法获取位置。这是一个例子：

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>

返回对象的left和top属性将为您提供x和y坐标，但您还可以访问bottom和right属性以获取距视口底部的距离以及距视口右侧的距离。

Answer 2

首先获取div元素，然后可以使用vanilla javascript 只是引用.offsetLeft和.offsetTop的情况返回<div>的属性：
var div = document.querySelector('div.timepicker');
div.offsetLeft;  // x position
div.offsetTop);  // y position

以下是您尝试尝试的代码段：

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

使用此功能查找div的位置：

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

参考：https://www.quirksmode.org/js/findpos.html

Javascript：无论滚动如何，都可以找到div相对于视口的位置

3 个答案: