如何检测HTML5中任何元素的大小调整

听取元素大小事件的最佳做法应该是什么？

我想重新定位一个元素（在我的情况下是jQuery对话框），一旦它改变了大小。 但我现在更感兴趣的是以一般的方式来倾听重新调整大小的事件，而不知道调整大小如何发生。 它假设是简单的，直到我发现一个元素可以通过重新调整大小

窗口大小调整

内容文字变化

儿童元素或其子元素调整大小

同级元素调整大小（例如表格中的单元格）

JavaScript直接更改它的src（的img）/ style属性（或者它是孩子的​​）

JavaScript重写CSS规则或样式表

原生调整大小特征textarea或CSS3调整大小

浏览器的缩放或文字放大

CSS过渡或动画（通过：悬停或任何其他的意思）

在事实上的标准中，有一个事件window.onresize来订阅窗口/框架上的大小。 但是HTML内容或DOM元素没有标准事件。

我遇到以下想法

仅适用于窗口/文档类型的DOM级别3事件目标

IE为元素提供了onresize，但它只是IE实现

MutationObserver取代突变事件，但它不适合“onresize”的需要

天真的JavaScript轮询

MutationObserver是关闭的（内部的DOM改变），但它还没有跨浏览器（IE10不支持），它会产生噪音，而不是CSS感知。

一个朴素的JavaScript轮询应该在所有情况下都能正常工作，但它会产生延迟或CPU浪费许多轮询。

---

那么，有一个简单的库。 虽然没有什么官方的如何监听所有类型元素的维度变化，只有window支持它，但我们幸运地为它提供了一个非常准确的polifill，并支持所有浏览器，甚至包括IE6 +。

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

你可以在那里找到一个ResizeSensor类。 要在元素上设置侦听器，您可以执行以下操作：

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

---

是的，没有简单的解决方案，那不好。

我发现了一些非常有用的东西：基于跨浏览器事件的元素大小调整

这很棘手，将一些必需的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/

链接地址: http://www.djcxy.com/p/81205.html

上一篇: How to detect resize of any element in HTML5

下一篇: Converting XML into PHP array with JSON is deleting attributes on some elements