Javascript：如何跟踪 div 的绝对位置（顶部/左侧）？

Question

我需要根据屏幕上的 position 获取 html 元素（div）的所有位置。 我想要像addEventListener这样的东西，它会在屏幕发生变化时发送元素的位置（在调整大小/缩放/滚动等时 - 每当元素的 position 发生变化时）。 纯 Javascript 有可能吗？

Answer 1

这不是一个完整的答案，而是我在评论中的意思的两个例子。 也许它会帮助您设置您正在尝试做的事情。 没有预先构建的方法可以做你想做的事，但这并不意味着你不能做。

如果用户更改浏览器的默认字体大小，第一个用于调整屏幕布局。 没有事件，所以我使用 window 上的focus和blur事件，并跟踪屏幕外元素的大小，以测试默认字体大小是否更改。 它在blur时被捕获并在focus上进行测试。 大小调整发生在 sizeTable function 中。

window.addEventListener( 'focus', () => fontSizeProxy( false ), false );
window.addEventListener( 'blur', () => fontSizeProxy( true ), false );
fontSizeProxy.base = document.getElementById('sz_gauge').offsetHeight;
fontSizeProxy.size = document.querySelector('div.tabs').clientWidth;

function fontSizeProxy( b )
 {
   if ( b )
     { fontSizeProxy.size = document.querySelector('div.tabs').clientWidth; }
   else // focus event
     { setTimeout( done, 1000 ); };

    function done()
     {
       // Get w after the delay so browser can reset completely.
       let w = document.querySelector('div.tabs').clientWidth;
       if ( w !== fontSizeProxy.size )
         {
            fontSizeProxy.size = w;
            fontSizeProxy.base = document.getElementById('sz_gauge').offsetHeight;
            sizeTable( nav.n );
         }; // end if
       w = null;    
    } // close done
 } // close fontSizeProxy

第二个示例是resize事件，之所以显示是因为它会限制事件，因此 function sizeTable 不会像事件触发那样频繁地执行。 您可能需要比此处使用的 500 毫秒更少的油门。

window.addEventListener( 'resize', resize, false );

function resize()
 { 
    if ( !resize.clear ) 
      {
        resize.clear = setTimeout( () => { resize.clear = null; sizeTable( nav.n ); }, 500 );    
      }; // end if
 } // close resize

你想要什么的概念就在这里，我想。 您只需要制作您的 sizeTable function 版本，它会在事件发生时查询和调整您想要执行的内容，并且您可能必须侦听大量事件才能执行相同的 function，如此处所做的那样。