时间戳

首页 > 解决方案 > Javascript：如何跟踪 div 的绝对位置（顶部/左侧）？

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

问题描述

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

标签： javascripthtmleventsecmascript-6event-handling

解决方案

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

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

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事件，之所以显示是因为它限制了事件，因此函数 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 函数版本，该函数在事件发生时查询和调整您想要执行的内容，并且您可能必须侦听大量事件才能执行相同的函数，如此处所做的那样。

推荐阅读