Menu
Please refer to this fiddle which illustrates the problem.
I am trying to get the cssText property of a <div> via window.getComputedStyle(element) (which returns a CSSStyleDeclaration object). This works just fine in Chrome (version right out of the repos), but it does not work in Firefox and IE10 and IE11. Actually, cssText is a property on the returned object, it's just an empty string.
It may not work in older versions of IE but I haven't tested it in those versions. I cannot seem to find any reference to this specifically not working in recent versions of IE. Actually Microsoft's documentation has led me to believe that it SHOULD work when in fact it does not ("Sets or retrieves the persisted representation of the style rule"). I am trying a little rubber duck debugging here to see if there is something obvious I've missed, or perhaps it's the VM images I'm using to test code on IE. What am I doing wrong? Thanks!
EDIT: What I'm looking for specifically is a way to get a list of CURRENT styles applied to an element, as happens when getting cssText from the object returned by getComputedStyle() in Chrome, but which does not happen in Firefox or IE. To clarify, it appears using the style.cssText property of an element in IE retrieves a list of styles applied to an element via stylesheets, style tags, and inline style rules, but NOT styles which were applied programmatically via scripts. This may be by design and as intended, but: How can I replicate the behavior seen when using cssText from a CSSStyleDeclaration object in Chrome (as returned by getComputedStyle()), but in Internet Explorer and Firefox?
217
getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.
To set or copy JavaScript computed style from one element to another, we can loop through each style and call the setProperty method to set the styles on the target element. to add a div and a section element. We define the copyNode function that takes the sourceNode and targetNode .
You should be able to use node.currentStyle to access specific style properties which is much more reliable than cssText.
http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx
Notice in this example cssText doesn't provide the background color. I'm not sure when runtimeStyle is supposed to work but it doesn't seem to work pre or post javascript manipulation. These are likely bugs in IE.
Note: The getComputedCSSText function is a quick hack for demonstration purposes and likely needs some modifications for use in a production environment.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
#MyStyle {
background-color: #FF00FF;
width: 40px;
height: 40px;
}
</style>
<script type="text/javascript">
getComputedCSSText = function (node) {
var s = [];
for (var propertyName in node.currentStyle) {
if ("string" == typeof(node.currentStyle[propertyName]) && node.currentStyle[propertyName] != "") {
s[s.length] = (propertyName.replace(/[A-Z]/g, function(x) { return "-"+(x.toLowerCase())}))+": "+node.currentStyle[propertyName];
}
}
return s.join('; ') + ";";
};
MyTest = function() {
var node = document.getElementById('MyStyle');
alert("[pre-js] runtimeStyle.width = " +node.runtimeStyle.width);
alert("[pre-js] style.cssText = " + node.style.cssText);
alert("[pre-js] currentStyle.width = " + node.currentStyle.width);
alert("[pre-js] currentStyle.backgroundColor = " + node.currentStyle.backgroundColor);
node.style.width="99px";
alert("[post-js] runtimeStyle.width = " +node.runtimeStyle.width);
alert("[post-js] style.cssText = " + node.style.cssText);
alert("[post-js] currentStyle.width = " + node.currentStyle.width);
alert("[post-js] currentStyle.backgroundColor = " + node.currentStyle.backgroundColor);
alert("[post-js] getComputedCSSText = " + getComputedCSSText(node));
};
</script>
</head>
<body>
<h1 id="MyStyle">FooBar!</h1>
<button onclick="MyTest()">Test</button>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
