Browser-independent way to determine which CSS properties were overridden by style attribute_问答_开发者

Browser-independent way to determine which CSS properties were overridden by style attribute

开发者 https://www.devze.com 2023-02-11 08:30 出处：网络

Is there any cross-browser way开发者_如何学C to determine which CSS properties were set manually via JavaScript? Or, possibly, which CSS attributes were overridden by style attribute?

Is cssText property standard and cross-browser: document.getElementById('id').style.cssText?

Another possible solution is to use wrapper function. Most simple example:

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

You can always grab the style attribute and rip out the values:

Non JQuery idea:

<!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

This will not catch what is added via JS code. aka elem.style.foo="bar"