CODEWITHSUNDEEP
javascriptcssinternet-explorer
L0j1k
L0j1k

Reputation: 12625

getComputedStyle() and cssText in IE and Firefox

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?

Upvotes: 8

Views: 3267

Answers (1)

Ralph Ritoch
Ralph Ritoch

Reputation: 3440

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>

Upvotes: 1

Related Questions