在IE和Firefox中的getComputedStyle()和cssText

Question

在IE和Firefox中的getComputedStyle()和cssText

8

请参考这个fiddle，它展示了问题。

我尝试通过window.getComputedStyle(element)（返回CSSStyleDeclaration对象）来获取<div>的cssText属性。在Chrome中（版本直接从存储库中获取），这很好用，但在Firefox和IE10及IE11中无效。实际上，cssText是返回对象上的属性，只是一个空字符串。

它可能不适用于旧版IE，但我没有测试过那些版本。我似乎找不到任何关于特别是近期版本的IE中此功能无法使用的参考。实际上，微软的文档让我相信，它应该可以工作，但事实并非如此（“设置或检索样式规则的持久化表示形式”）。我正在进行一些简单的调试，看看是否有什么明显的错误，或者可能是我用来测试IE代码的VM映像。我做错了什么？谢谢！

编辑：我具体要找的是一种获取应用于元素的当前样式列表的方法，就像在Chrome中通过从window.getComputedStyle(element)返回的对象获取cssText时发生的那样，但是在Firefox或IE中不会发生。请澄清，似乎在IE中使用style.cssText属性检索应用于元素的样式列表，包括通过样式表、样式标签和内联样式规则应用的样式，但不包括通过脚本编程应用的样式。这可能是设计意图和预期的，但是：如何在Internet Explorer和Firefox中复制使用Chrome中的CSSStyleDeclaration对象（由window.getComputedStyle()返回）的cssText时看到的行为？

- L0j1k

所以您是在说，getComputedStyle() 返回的 CSSStyleDeclaration 对象的 cssText 属性仅提供由样式表和样式标签应用的样式，而不包括例如更改元素样式的脚本？我可以接受这个。但是，当尝试检索应用于元素的当前样式时，使用 element.style.cssText 不会给我任何实际数据（即它仍然是一个空字符串）。如何在 IE 中复制此期望的行为，即获取包含所有当前应用的样式的字符串，无论其来源如何？ - L0j1k

实际上，如果你所描述的 getComputedStyle() 是正确的，那么 IE 应该在我在问题中链接的 fiddle 中的 fooText div 内放置一些东西，但事实并非如此。cssText 属性不包含任何数据，包括通过样式表应用的样式，除非我对 JSFiddle 包含样式的方式有误解。 - L0j1k

2

我在Firefox和IE中都看到了空响应。@Loj1k，你能再检查一下Firefox吗？我也创建了一个测试，但是发现Firefox没有通过。 - Sampson

你说得对！我不记得昨天是怎么得出它在Firefox中工作的结论的了。Firefox不会用任何东西填充cssText（就像IE上的CSSStyleDeclaration对象一样，它是一个空字符串）。真是一团糟。在过去的两天里，我想起了为什么离开了Web开发转向后端。看来迭代属性是唯一跨浏览器获取元素实际当前样式列表的方法。趁这个机会，@JonathanSampson，感谢您为使IE与其他浏览器兼容所做的任何努力。IE10和11比旧版本领先了几个世纪。 :) - L0j1k

1

由于Firefox和IE表现相同，可能是Chrome在做一些不应该做的事情。话虽如此，Chrome是一款流行的浏览器，互操作性很重要。我已经为我们的团队内部提出了一个问题，以考虑这种行为。 - Sampson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ralph Ritoch · Accepted Answer

您应该能够使用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>