如何使用 YUI3 检测 HTML 元素的样式变化？答案

【问题标题】：How to detect style change of an HTML element with YUI3?如何使用 YUI3 检测 HTML 元素的样式变化？
【发布时间】：2013-06-07 14:52:22
【问题描述】：

我正在开发的网站使用的是不稳定的广告提供商，有时它们返回的 JS 代码有问题，例如最终改变了整个 body 元素的背景颜色，而不是它自己的 div 元素。不幸的是，我们必须使用他们的服务，他们需要很长时间才能纠正这些错误。

所以，我正在考虑创建一个解决方法，例如当body 元素的background-color 样式发生更改时，将调用我的回调函数将其更改回正确的值。有没有一种干净的方法可以用 YUI3 （或者 jQuery，或者如果 YUI3 没有的话，纯 JS）？

我知道我可以使用setInterval() 定期设置背景以校正颜色，但这对我来说似乎既浪费又混乱。有人知道更好的方法吗？

【问题讨论】：

如何重复使用背景图像，所以如果他们改变颜色，没关系，因为你有一个平铺的背景。或者也许您可以将背景属性声明移动到另一个标签中？而不是body hmtl 或嵌套在正文中的第一个 div 怎么样？只是一些想法。
@ProfileTwist 我已经有一个重复的背景图像，但它在顶部定义了一个渐变，所以它有repeat-x，但没有repeat-y。我不知道如何让它在二维中重复。我无法在html 上设置背景颜色，因为它被body 的样式覆盖。我没有包含所有内容的单个 div 元素，但我会检查是否可以添加它。无论如何，感谢您的想法，我喜欢它们 :) 广告服务器正在将 html, body, #someid { background-color: whatever } 插入我的代码中，我认为它们的意思是 html body #someid...
你为什么不检测“变化”而不是你有一个脚本并简单地撤消损坏？如果您知道 html、body、#someid 会受到影响，为什么不通过磨床运行它们并更改它们的设置呢？如果我是你，我宁愿花时间对 AD 开发人员大喊大叫，并告诉他们像现在一样修复它。更改这样一个小错误应该只需要大约 30 分钟。这是一个重大的错误
大喊大叫的部分已经完成，他们最终会修复它，但与此同时，我们的用户遇到了一个损坏的页面，我必须尽快修复它......现在已经修复了，但我是寻找更清洁的解决方案。

【解决方案1】：

如果您是通过 javascript 更改 CSS，您可以使用 Mutation Events（二级事件）。

你可以监听这些事件：

所以要么使用 Style 属性或 Class 属性监听 DOMAttrModified。

【讨论】：