Question

是否有任何跨浏览器方式来确定哪些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
}

Answer 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"

与浏览器无关的方法，用于确定样式属性覆盖了哪些CSS属性

1 个答案: