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，或者您可以覆盖以创建一个API的函数。

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

Answer 2

如果您需要在2020年收听元素大小，则可以使用ResizeObserver

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

您可以尝试以下代码片段来打印元素的尺寸更改

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

resizeObserver.observe(htmlElement);

Answer 3

如果您使用的是jQuery，则可以使用调整大小事件来识别宽度。

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

编辑：添加了工作示例

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

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

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

3 个答案: