如何检测HTML5中任何元素的大小调整 [英] How to detect resize of any element in HTML5
问题描述
关于元素调整大小事件的最佳实践应该是什么？
What should the best practices to listen on element resize event?
我想重新定位一个元素（在我的情况下是jQuery对话框），一旦它的大小改变了。但是我现在更感兴趣的是以一般方式来监听resize事件，而不知道调整大小是如何发生的。它假设很简单，直到我发现一个元素可以通过重新调整大小
I want to re-position an element (jQuery dialog in my case), once it's size changed. But I am now more interested to do in a general way to to listen to resize event, unaware of how the resize happens. It suppose to be simple until I found an element can be re-sized by
- window resize
- 内容文本更改
- 子元素或子元素元素已调整大小
- 同级元素调整大小（例如表格中的单元格）
- JavaScript直接更改src（of img）/ style属性（或者它的子项）
- JavaScript重写CSS规则或样式表
- 原生调整大小功能textarea或 CSS3调整大小
- 浏览器缩放或文字放大
- CSS过渡或动画（通过：悬停或任何其他方式）
- window resize
- content text changes
- children elements or their children elements resized
- a sibling element resize (e.g. a cell in a table)
- JavaScript changes it src(of img)/style attribute directly (or it's child's)
- JavaScript rewrite CSS rules or stylesheet
- native resize feature textarea or CSS3 resize
- browser's zoom or text-enlarge
- CSS transition or animations (by :hover or any other mean)
在事实上的标准中，有一个事件 window.onresize 来订阅窗口/框架上的调整大小。
但HTML内容或DOM元素上没有标准事件。
In the de-facto standard, there is a event window.onresize to subscribe resize on a window/frame.
But there is no a standard event on the HTML content or DOM Elements.
我遇到以下想法
- DOM Level 3 事件目标仅限于窗口/文档类型
- IE有 onresize 元素，但它只是IE实现
- MutationObserver 取代了变异事件，但它不适合需要onresize
- 天真的JavaScript轮询
- DOM Level 3 event target only on window/document type
- IE has onresize for Elements but it is IE only implementation
- MutationObserver which replace Mutation Events, but it does not fit the need of "onresize"
- naive JavaScript polling
MutationObserver关闭（内部DOM更改） ），但它（尚未）跨浏览器（IE10不支持）并且它产生噪音，而不是CSS意识。
MutationObserver is close(inner DOM changes), but it does not (yet) cross browser (IE10 does not support) and it generate noise, not CSS aware.
天真的JavaScript轮询应该适用于所有情况，但它产生延迟或CPU很多民意调查。
A naive JavaScript polling should work in all case, but it generate either delay or CPU waste of many poll.
推荐答案
嗯，有一个简单的库。虽然没有官方如何倾听所有类型元素的尺寸变化，只有窗口支持它，我们幸运的是，一个polifill非常准确并且支持所有浏览器甚至包含IE6 +。
Well, there is a easy library for that. Although there's nothing official how to listen on dimension changes of all types of elements and only window supports it at the moment we have luckily a polifill for that that works very accurate and supports all browsers even inclusive IE6+.
https：/ /github.com/marcj/css-element-queries
你可以找到一个类 ResizeSensor 。要在元素上设置监听器，您可以这样做：
You can find there a class ResizeSensor. To setup a listener on a element you can just do:
new ResizeSensor($('.myelements'), function() {
console.log('changed');
});
这篇关于如何检测HTML5中任何元素的大小调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
