如何檢測HTML5中任何元素的大小調整

在元素大小調整事件上監聽的最佳做法應該是什麼？如何檢測HTML5中任何元素的大小調整

我想重新定位一個元素（jQuery對話框在我的情況下），一旦它的大小發生了變化。但我現在更感興趣的是以一般的方式來傾聽重新調整大小的事件，而不知道調整大小如何發生。它假設是簡單的，直到我發現了一個元素可以通過

被調整

窗口調整
內容的文字改變
子元素或他們的子元素調整
一個兄弟元素調整大小（例如，表格單元格）
的JavaScript改變它SRC（IMG）的/ style屬性直接（或它的孩子）
的JavaScript重寫CSS規則或樣式表
本地調整大小功能的textarea或CSS3 resize
瀏覽器的縮放或文本放大
CSS過渡或動畫（按：懸停或任何其他意思）

在事實上的標準，有一個事件window.onresize訂閱窗口/框架上的大小。但是HTML內容或DOM元素沒有標準事件。

我遇到了如下思考

DOM Level 3活動的目標只在窗口/文件類型
IE具有onresize的元素，但它是IE唯一實現
MutationObserver其取代Mutation Events，但它確實不適合「onresize」的需要
naive JavaScript polling

MutationObserver關閉（內部DOM更改），但它不（但）跨瀏覽器（IE10不支持），它會產生噪音，而不是CSS感知。

一個樸素的JavaScript輪詢應該在所有情況下都能正常工作，但它會產生延遲或CPU浪費許多輪詢。

來源

2014-09-05 Dennis C

我發帖說做這個庫的概述在http://stackoverflow.com/q/37113134/1026 – Nickolay 2016-05-13 01:06:56

是的，沒有簡單的解決方案，那不好。

我發現非常有用的東西給這個：cross browser event based element resize

這是棘手，附加一些必要的HTML到必須聽取並檢測滾動事件的元素。

從該頁一些HTML例子：

<div class="resize-triggers"> 
    <div class="expand-trigger"><div></div></div> 
    <div class="contract-trigger"></div> 
</div>

也有一些JS：

var myElement = document.getElementById('my_element'), 
    myResizeFn = function(){ 
     /* do something on resize */ 
    }; 
addResizeListener(myElement, myResizeFn); 
removeResizeListener(myElement, myResizeFn);

但它爲元素那些能夠有孩子，而不是自閉標籤。

你可以看到演示http://jsfiddle.net/3QcnQ/67/

來源

2014-09-05 06:52:01

有趣的解決方法 – 2014-09-05 07:16:42

只有當它可以幫助：））） – 2014-09-05 08:00:48

嗯，是一個簡單的庫。雖然沒有什麼官方的如何監聽各種元素的尺寸變化，只有window支持它，我們幸運地爲它提供了一個非常準確的polifill，並支持所有瀏覽器，甚至包括IE6 +。

https://github.com/marcj/css-element-queries

你可以發現有一類ResizeSensor。要設置一個元素，你可以在聽者只是做：

new ResizeSensor($('.myelements'), function() { 
    console.log('changed'); 
});

來源

2014-09-13 14:30:38

我無法得到這個在陰影根中包含的元素。 – 2017-06-16 22:26:25

如何檢測HTML5中任何元素的大小調整

回答

相關問題