javascript 如何检测 HTML5 中任何元素的大小调整
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25679784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect resize of any element in HTML5
提问by Dennis C
What should the best practices to listen on element resize event?
监听元素调整大小事件的最佳实践应该是什么？
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
我想重新定位一个元素（在我的例子中是 jQuery 对话框），一旦它的大小发生变化。但我现在更感兴趣的是用一般的方式来监听调整大小事件，不知道调整大小是如何发生的。它应该很简单，直到我发现一个元素可以通过以下方式重新调整大小
- 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)
- 调整窗口大小
- 内容文本更改
- 子元素或其子元素调整大小
- 同级元素调整大小（例如表格中的单元格）
- JavaScript 直接改变它的 src(of img)/style 属性（或者它是孩子的）
- JavaScript 重写 CSS 规则或样式表
- 本机调整大小功能 textarea 或CSS3 调整大小
- 浏览器的缩放或文本放大
- CSS 过渡或动画（通过 :hover 或任何其他方式）
In the de-facto standard, there is a event window.onresizeto subscribe resize on a window/frame.
But there is no a standard event on the HTML content or DOM Elements.
在事实上的标准中，有一个事件window.onresize可以订阅窗口/框架上的调整大小。但是没有关于 HTML 内容或 DOM 元素的标准事件。
I come across the following thought
我遇到了以下想法
- DOM Level 3event target only on window/document type
- IE has onresizefor Elements but it is IE only implementation
- MutationObserverwhich replace Mutation Events, but it does not fit the need of "onresize"
- naive JavaScript polling
- DOM Level 3事件目标仅针对窗口/文档类型
- IE对 Elements有onresize但它只是 IE 的实现
- MutationObserver取代了Mutation Events，但它不适合“onresize”的需要
- 朴素的 JavaScript 轮询
MutationObserver is close(inner DOM changes), but it does not (yet) cross browser (IE10 does not support) and it generate noise, not CSS aware.
MutationObserver 是关闭的（内部 DOM 更改），但它（还）不跨浏览器（IE10 不支持）并且它会产生噪音，而不是 CSS 感知。
A naive JavaScript polling should work in all case, but it generate either delay or CPU waste of many poll.
一个简单的 JavaScript 轮询应该适用于所有情况，但它会产生延迟或 CPU 浪费很多轮询。
回答by Clint Harris
FYI, there's a proposed specfor a new ResizeObserverAPI. Chrome seems to be the only browser that has implemented it as of Aug 2018 (see caniuse.com), but there's at least one polyfillyou can use now (which uses MutationObserver).
仅供参考，有一个新的ResizeObserverAPI的建议规范。铬似乎已经实现了它为2018年8月（见的唯一的浏览器caniuse.com），但有至少一个填充工具，你现在（使用可以使用）。MutationObserver
回答by Marc J. Schmidt
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 windowsupports it at the moment we have luckily a polifill for that that works very accurate and supports all browsers even inclusive IE6+.
嗯，有一个简单的库。虽然没有官方规定如何监听所有类型元素的尺寸变化，并且目前只window支持它，但幸运的是，我们有一个 polifill 可以非常准确地工作并支持所有浏览器，甚至包括 IE6+。
https://github.com/marcj/css-element-queries
https://github.com/marcj/css-element-queries
You can find there a class ResizeSensor. To setup a listener on a element you can just do:
你可以在那里找到一个类ResizeSensor。要在元素上设置侦听器，您可以执行以下操作：
new ResizeSensor($('.myelements'), function()?{
console.log('changed');
});
回答by George Garchagudashvili
Yes there is not simple solution, that's not good.
是的，没有简单的解决方案，这不好。
I've found something very useful for this.: cross browser event based element resize
我发现了一些对此非常有用的东西。：基于跨浏览器事件的元素调整大小
It's tricky, appending some needed html to the element that have to be listened and detects scrolling event.
这很棘手，将一些需要的 html 附加到必须侦听和检测滚动事件的元素中。
Some html example from that page:
该页面的一些html示例：
<div class="resize-triggers">
<div class="expand-trigger"><div></div></div>
<div class="contract-trigger"></div>
</div>
Also Some JS:
还有一些JS：
var myElement = document.getElementById('my_element'),
myResizeFn = function(){
/* do something on resize */
};
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);
But it works for elements those are able to have children, not for self-closing tags.
但它适用于那些能够有子元素的元素，而不适用于自闭合标签。
You can see the demo http://jsfiddle.net/3QcnQ/67/
可以看demo http://jsfiddle.net/3QcnQ/67/
回答by paulo carraca
Given yourelement, when the size changes (ex. a text translation took place) you can doyourstuff(), including
ro.unobserve(yourelement);
给定 yourelement，当大小发生变化时（例如发生文本翻译），您可以执行 doyourstuff()，包括
ro.unobserve(yourelement);
var inilen = yourelement.offsetWidth;
var ro = new ResizeObserver( entries => {
for (let entry of entries) {
const cr = entry.contentRect;
if (inilen !== cr.width) {
doyourstuff();
}
}
});
ro.observe(<your element>);
