javascript - 检测浏览器在调整大小和更新元素位置时宽度变化了多少

Question

有一个 div 元素绝对定位在一个相对容器中。它最初位于四个按钮之一下方。根据单击哪个按钮，我用 JS 计算按钮的 x 坐标并将 div 元素移动到该按钮下方。这是我的标记和 JS:

<div id='container-of-four-buttons' style="width: 100%; position: relative;">
 <button>Foo</button>
 <button>Buzz</button>
 <button>Foo</button>
 <button>Buzz</button>
</div>

<div id='followAlong-container' style="width: 100%; position: relative;">
<div class='followAlong-div' style="position:absolute; width: 15px; height: 13px;">Some stylized arrow</div>
</div>

var initialDiv = /* selected the second button to be initial */
var followAlongDiv = document.querySelector('followAlong-div');
var buttons = document.querySelectorAll('button');

followAlongDiv.style.left = initialDiv + 89 + 'px';


buttons.forEach(function(btn) {
  btn.addEventListener('click', function() {
    let xCoord = 0;
    xCoord += (div.offsetLeft - div.scrollLeft + div.clientLeft);
    followAlongDiv.style.left = xPos + 17 + 'px';
  });
});

但是，如果我调整浏览器的大小，四个按钮元素会相互收缩，但 followAlongDiv 会保持在同一位置，因为它绝对定位在其相对容器中。

如何计算浏览器调整后的宽度并更新 followAlongDiv 的位置？

我将使用 window.addEventListener('resize', updatePosition)，但我只是不知道如何处理 updatePosition 函数的公式。

Answer 1

首先，“followAlong-div”是一个类(在 className 之前需要“.”):

var followAlongDiv = document.querySelector('.followAlong-div');

其次，我不明白为什么你有这条线:

xCoord += (div.offsetLeft - div.scrollLeft + div.clientLeft);

调整大小只需要:

window.onresize = ()=>{
          var xCoord = 0;
          xCoord += (selectedButton.offsetLeft);
          followAlongDiv.style.left = xCoord + 'px';

}

根据您的代码，我认为这就是您想要的:https://jsfiddle.net/vua4eLhc/

希望对您有所帮助!