Question

我们说我有以下HTML：

<div id='content'></div>

我想在这个元素发生高度突变时被警告。我希望MutationObserver课程可以帮助我，但这是我的问题：

document.querySelector('#content').style.height = '100px'

它会像预期的那样触发我的回调，但正常的用户互动不会触发此操作，例如http://jsfiddle.net/wq4q9/2/

我的问题是，检查元素高度是否发生变化的最佳现代方法是什么？

请不要jQuery。

Answer 1

我认为除了民意调查之外你还有什么可以做的。（你的观察者不会被触发的另一种方式是，如果你改变了一个应用于该元素的CSS规则，改变了它的父级大小并且它的大小依赖于它，添加了一个影响它的新样式表...）

Answer 2

您可能会继续T.J. Crowders推荐进行投票，但是您的代码示例因其他原因而无法工作（似乎）：

<{1}} * childList *表示它用于监控目标节点子元素的添加和删除。

^{*这是我第一次也是唯一一次引用MSDN而不是MDN，因为The documentation文档是crap}。

您应该观察的记录是子树：

设置为true以监控对所有目标节点的后代的更改

如果你这样做，那么MDN。

var target = document.querySelector('#content');

var observer = new MutationObserver(function(mutations) {
  console.log(mutations);   
});

var config = { attributes: true, childList: true, subtree: true, characterData: true };
observer.observe(target, config);

document.querySelector('button').addEventListener('click',function(){
    target.style.height = '200px';
});

然而，它仍然无法在Chrome中运行;可能是因为the code works in Firefox中报告了Chrome bug。

如何在没有jQuery的情况下检测DOM元素突变

2 个答案: