请引用this fiddle这说明了问题。
我正在尝试获取 cssText <div> 的属性通过window.getComputedStyle(element) (which returns a CSSStyleDeclaration object)。这在 Chrome 中工作得很好(repos 中的版本)，但在 Firefox 和 IE10 和 IE11 中不起作用。实际上，cssText是返回对象的一个属性，它只是一个空字符串。
它可能不适用于旧版本的 IE，但我尚未在这些版本中对其进行测试。我似乎找不到任何对此的引用，特别是在最近版本的 IE 中不起作用。其实Microsoft's documentation让我相信它应该工作，而实际上它不工作(“设置或检索样式规则的持久表示”)。我正在尝试在这里进行一些橡皮鸭调试，看看是否有明显的我遗漏的东西，或者可能是 VM images我正在使用 IE 测试代码。我究竟做错了什么？谢谢!
编辑:我正在寻找的是一种获取应用于元素的当前样式列表的方法，就像获取 cssText 时发生的那样。来自 getComputedStyle() 返回的对象在 Chrome 中，但在 Firefox 或 IE 中不会发生。为了澄清，它似乎使用了 style.cssText IE 中元素的属性检索通过样式表、样式标签和内联样式规则应用于元素的样式列表，但不是通过脚本以编程方式应用的样式。这可能是设计使然并且符合预期，但是:如何复制使用 cssText 时看到的行为？来自 Chrome 中的 CSSStyleDeclaration 对象(由 getComputedStyle() 返回)，但在 Internet Explorer 和 Firefox 中？
最佳答案
您应该能够使用 node.currentStyle 访问比 cssText 可靠得多的特定样式属性。
http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx
注意这个例子中的 cssText 没有提供背景颜色。我不确定 runtimeStyle 何时应该工作，但它似乎在 javascript 操作之前或之后不起作用。这些可能是 IE 中的错误。
注意:getComputedCSSText 函数是用于演示目的的快速 hack，可能需要进行一些修改才能在生产环境中使用。
<!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>
关于javascript - IE 和 Firefox 中的 getComputedStyle() 和 cssText，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26874769/