是否可以在元素的属性上设置 JS 侦听器？

Question

我想在元素的宽度增长到一定大小时运行 JavaScript 函数。正确地说，听众似乎只是为了“事件”。但是有没有办法在 CSS 属性上设置一个“监听器”，比如宽度？如果有，怎么做？

Answer 1

如果您特别希望侦听 DOM 元素上的属性更改，则可以在现代浏览器中使用 MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) 并回退到 Mutation 事件 (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events)。

如果不是属性更改而是另一个导致 DOM 元素改变大小的事件，您可以挂钩该事件，例如，如果是导致更改的窗口大小调整，您可以将该事件与以下代码（请注意，IE 8 和更早版本需要后备）：

window.addEventListener("resize", function(e){});

如果宽度的变化是由 JavaScript 库引起的，那么可能会有一个 API 用于它，或者您可以覆盖一个函数来创建它。

作为最后的手段，您可以使用 setInterval 或 requestAnimaitonFrame 轮询 DOM 元素，具体取决于您需要检查元素的频率。

Answer 2

如果你需要在 2020 年收听一个元素大小，你可以使用 ResizeObserver

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

你可以试试下面的sn-p来打印一个元素的维度变化

const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) 
        console.log(entry);
});

resizeObserver.observe(htmlElement);

Answer 3

如果你使用 jQuery，你可以使用 resize 事件来识别宽度。

http://api.jquery.com/resize/

编辑：添加了工作示例

http://jsfiddle.net/addy2601/5LX6A/

$( '#div' ).resize(function() {
//Your code here
});