Dom 元素更改通知答案

【问题标题】：Dom element change notificationDom 元素更改通知
【发布时间】：2014-01-27 03:29:46
【问题描述】：

我遇到了最奇怪的问题。仅在 chrome 浏览器中，我的一个 html div 会添加一个额外的内联 css 标记。这个标签是style="overflow:hidden"，这导致布局中断，我们很快发现这是问题所在。

但是，在代码库中没有我们可以搜索的地方，这让我们知道这个标签是如何被添加的。有没有办法调试这个？我尝试了 chrome javascript 调试器，但它没有帮助我找到问题。在所有其他浏览器中，该标签不会出现。在 chrome 中，它会将自身附加到 div 元素。我们尝试搜索 div 元素，假设 jquery/javascript 正在对元素进行后期操作，但仍然找不到它发生的位置。

是否可以在元素上设置手表以查看它何时发生变化或谁在操纵它？

【问题讨论】：

您可以发布指向您页面的链接吗？还是尝试在小提琴中复制问题？
这是使用分而治之策略的最佳时机：开始删除大块并查看问题是否仍然存在，直到您可以缩小影响不需要行为存在的越来越小的块.我首先从页面中删除 javascript，如果这停止了行为，覆盖 jQuery hide 方法并让它引发错误（这将在您的控制台中转储堆栈跟踪）。
您的DIV 是否已经定义了id 或css class？如果是，您可以在 css 规则中添加 overflow:scroll !important;
我的 div 在 FF 中有一个名为 'control' 的类，html 代码为 <div class='control'>，但在 chrome 中代码变为 <div class='control' style='overflow:hidden'>。控件类是一个简单的类，只设置前景色和背景色
然后，如果您可以访问 css 文件，您只需要添加 'overflow:scroll !important;'在control 类中，它将覆盖它。

标签： javascript jquery css debugging google-chrome

【解决方案1】：

正如我在评论中所说，您可以在 css 文件中覆盖 control 类。

.control{
    overflow:auto !important;
}

【讨论】：

【解决方案2】：

嗯！显然，您可以单步执行页面上的 javascript。

要排除 javascript，您可以尝试完全禁用 javascript。或者使用

添加内联样式

overflow: auto!important

到 div 元素

【讨论】：

【解决方案3】：

提供的信息很难提供帮助，但您可以将overflow: visible !important; 添加到.control。在控制台中检查一下，你会看到它覆盖了内联隐藏样式

JSFIDDLE

【讨论】：