All geek questions in one place

GetComputedStyle () and cssText in IE and Firefox

Please refer to this fiddle which illustrates the problem.

I am trying to get the cssText <div> property through window.getComputedStyle(element) ( which returns a CSSStyleDeclaration object ). This works very well in Chrome (version directly from the repository), but it does not work in Firefox and IE10 and IE11. In fact, cssText is a property of the returned object, it's just an empty string.

It may not work in older versions of IE, but I have not tested it in these versions. It seems that I can not find links to this that do not specifically work in recent versions of IE. In fact, the Microsoft Documentation led me to the idea that it SHOULD work when it’s actually not ("Sets or restores a saved representation of a style rule"). I am trying to debug a small rubber duck to see if there is something obvious that I missed, or maybe these are the VM Images that I use to check the 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 I get the cssText object returned by getComputedStyle() in Chrome, but which doesn't happen in Firefox or IE. To clarify this, it appears using the style.cssText property of the element in IE, which retrieves the list of styles applied to the element through style sheets, style tags, and inline style rules, but not styles that were applied programmatically using scripts. It can be both in design and purpose, but: how can I reproduce the behavior observed when using cssText from the cssText object in Chrome (how getComputedStyle() returns), but in Internet Explorer and Firefox?

+5
source share
1 answer

You can use node.currentStyle to access certain style properties, which are much more reliable than cssText.

http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx

Note that in this example, cssText does not provide a background color. I'm not sure when runtimeStyle should work, but it doesn't seem to work before or after processing JavaScript. These are probably errors in IE.

Note. The getComputedCSSText function is a quick hack for demo purposes and probably 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(/[AZ]/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>
+1
source

Source: https://habr.com/ru/post/1206672/

More articles:


All Articles