如何知道DOM元素何時移動或調整大小

我想知道是否有DOM事件監聽，它告訴我何時DOM元素移動重新定位或在頁面上調整大小。我不是在談論一個被拖拽的元素。一個例子是，如果一個頁面上有三個項目的列表，並且我使用JS從頁面中刪除頂部兩個列表項中的一個（或者隱藏它或其他），我想附加一個處理程序來運行時第三個列表項在頁面中向上移動。如何知道DOM元素何時移動或調整大小

我正在使用jQuery，所以普通的javascript或jQuery的答案是可以接受的。

也許在元素級別沒有移動/位置/大小調整事件，所以如果有一個頁面/文檔級別的事件會告訴我該頁面已重新繪製，並且我可以檢查是否需要再次調用一個函數？

背景

我把一個透明的div元素上，而一個Web服務調用進行刪除該元素。由於我需要絕對定位覆蓋div，因此我希望它能夠跟蹤最初覆蓋的元素。實際上將其錨定到基礎元素。

來源

2010-08-09 slolife

您無法獲取元素移動/調整大小的回調;你將不得不經常檢查間隔輪詢器的尺寸，這會使它的響應速度變慢。您也可以通過在窗口resize事件上調用檢查器來改善此問題（如果涉及到溢出或固定位置，則可以使用scroll）。還可以添加DOM突變事件偵聽器，以便在元素從文檔樹中移除時獲得通知，但這不會在所有瀏覽器的工作。

你就不能疊加使用普通CSS？例如，把position: relative的元素被遮蔽，然後添加覆蓋在它裏面，有以下？

position: absolute; 
z-index: 10; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
opacity: 0.5;

來源

2010-08-09 23:03:15 bobince

我會嘗試一下關於在元素中放置疊加層的建議。另外，只是看window.resize和window.scroll可能工作...我只是重新計算我的所有覆蓋。 – slolife 2010-08-10 17:01:49

似乎不起作用。我的基本元素（被遮擋的元素）是一個表格行（tr）。如果我將它的position設置爲relative，並追加我的overlay元素（$ overlay.appendTo（$ tr），那看起來是否正確？），並且position = absolute，疊加層將填滿整個屏幕。 – slolife 2010-08-11 20:56:26

調整大小請參閱https：// github。com/marcj/css-element-queries – 2013-06-08 22:06:04

There's a (Ben Alman) plugin for that.^TM

這是一個很好的插件，但我建議使用它謹慎（即不太多的元素），從而保持輪詢量下降。

來源

2010-08-09 22:45:36 jmar777

我不要認爲這個解決方案在這麼長時間後會有相關性，但是基於溢出和下溢事件提供了一個優秀的跨瀏覽器解決方案here

爲了使我們的大小調整監聽魔法，我們注入的對象元素到目標元素，被設置的特殊樣式從視圖中隱藏的列表，並監視其調整大小 - 它作爲一個觸發提醒我們當目標元素父級調整大小時。

<object>元素的內容具有本地resize事件，就像窗口一樣。

來源

2013-05-23 13:13:04

儘管這個答案已經過了一年多了，而且鏈接很有幫助，但如果你在這裏，在這個網站上發佈了答案的重要部分，或者你的帖子風險被刪除了，那會更好。它提到的答案几乎不超過鏈接。]（http://stackoverflow.com/faq#deletion）如果您願意，您可能仍然包含鏈接，但僅作爲「參考」。答案應該獨立，不需要鏈接。 – Taryn 2014-10-06 11:10:16

如果您嘗試從已從DOM中刪除的元素（contentDocument在第60行爲null）中刪除偵聽器，則文章中描述的方法會中斷。我認爲，簡單的空檢查應該有所幫助。 – 2017-07-10 23:00:24

如何知道DOM元素何時移動或調整大小

回答

相關問題