独立于浏览器的方式来确定哪些 CSS 属性被样式属性覆盖答案

【问题标题】：Browser-independent way to determine which CSS properties were overridden by style attribute独立于浏览器的方式来确定哪些 CSS 属性被样式属性覆盖
【发布时间】：2011-02-17 00:22:33
【问题描述】：

是否有任何跨浏览器的方法来确定哪些 CSS 属性是通过 JavaScript 手动设置的？或者，有可能，样式属性覆盖了哪些 CSS 属性？

cssText 属性标准和跨浏览器：document.getElementById('id').style.cssText？

另一种可能的解决方案是使用包装函数。最简单的例子：

function css(node, prop, value)
{
   $(node).css(prop, value);
   memory[node][prop] = value;  // remember that we set prop for the node
}

【问题讨论】：

是否有您想要检查的特定属性？您可以使用这个 jQuery 插件：west-wind.com/weblog/posts/478985.aspx - 您可以使用 data() 将旧值设置到元素上。只是一个想法......可能不适合你想要做的事情。
@Shane Garelja：有趣的插件，但它只监控预定义的一组属性。我需要“监控”所有可以更改的样式属性。

标签： javascript jquery css cross-browser

【解决方案1】：

您总是可以获取样式属性并删除值：

非 JQuery 想法：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title></title>
  </head>
  <body>
    <span id="aspan" style="color:red; background-color: blue;">Hey Hey Hey</span>
    <script>

      String.prototype.trim = function () {
        return this.replace(/^\s*/, "").replace(/\s*$/, "");
      }

      var sp = document.getElementById("aspan");
      var stys = sp.getAttribute("style").split(";");
      var rules = {};
      for(var i=0; i<stys.length;i++){        
        var sty = stys[i].split(":");
        if(sty.length>=2){
          rules[sty.shift().trim().toLowerCase()] = sty.join(":").trim();
        }
      }

      alert(rules["color"]);
      alert(rules["background-color"]);

    </script>
  </body>
</html>

JSBIN

这不会捕获通过 JS 代码添加的内容。又名elem.style.foo="bar"

【讨论】：

这是您询问 style 属性设置的问题的一半。它不包括 JavaScript 设置它的部分。对不起，我试图给你一些帮助。大声笑