Browser-independent way to determine which CSS properties were overridden by style attribute
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"
加载中,请稍侯......
精彩评论