Javascript / 根据一个元素的位置定位另一个元素

Javascript / Positioning an element according to another element's position

本文关键字：元素 一个 位置 另一个 定位 Javascript      更新时间：2023-09-26

我希望我的div（默认情况下使用style="display: none; position: absolute"，仅在单击单元格时可见）显示在表格中单击的单元格的左侧30px。 addevent代表我的div，我想把它放在单元格30px左边。所以，我希望我的div 显示在单击单元格左侧30px。我做错了什么？

var cell = document.getElementsByTagName('td');
for (var i=0; i<cell.length; i++) {
cell[i].onclick = function() {
var data = this.getAttribute('data-cell');
editEvent = document.getElementById('addevent');
editEvent.style.cssText ='display: block;';
this.style.position = 'relative';
var rect = this.getBoundingClientRect();
editEvent.style.left = rect.left + 30;
editEvent.getElementsByTagName('input')[3].value = data;
};

正如我在评论中所说，这可能是一个统一的错误。请参阅示例：

var $floating = document.querySelector('.floating-div');
var $contentDivs = document.querySelectorAll('.content-div');
for (var i = $contentDivs.length; i--;) {
  $contentDivs[i].addEventListener('click', function () {
    var rect = this.getBoundingClientRect();
    $floating.style.top = rect.top - 30 + 'px';
    $floating.style.left = rect.left - 30 + 'px';
    $floating.classList.add('show');
  });
}
.content-div {
  border: solid 1px black;
  position: relative;
  width: 120px;
  top: 120px;
  left: 120px;
  float: left;
}
.floating-div {
  border: solid 1px red;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .2s ease, left .1s ease;
}
.floating-div.show {
  opacity: 1;
}
<div class="floating-div">
  <p>i'll float!</p>
</div>
<div class="content-div">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto rerum aspernatur dolores, eos laborum illo, placeat minima, dolorum eaque perferendis ut nam eligendi quas quod minus deleniti dicta aut nemo.</p>
</div>
<div class="content-div">
  <p>I'm juust another content-div! Hey hey hey</p>
</div>

相关文章：