如何检测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中任何元素的大小调整

回答

相关问题