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

debugcn 发表于 Dev

亚历山大·贝洛夫（Alexander Belov）

我希望我的div（style="display: none; position: absolute"默认情况下，仅在单击单元格时才可见）显示在30px表中单击的单元格的左侧。addevent代表我30px要从单元格左移的div 。因此，我希望我的div30px从单击的单元格的左侧出现。我究竟做错了什么？

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

西罗·科斯塔（Ciro Costa）

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。