Question

在考虑向铬提交错误时寻找解决方法 -

如果元素有转换，getComputedStyle不会返回您希望它返回的内容，直到转换结束。

长和短 - 如果我有一个高度为24px的元素，并且添加一个类使其高度为80px（具有到和来的过渡），并且两个高度都在样式表中定义 - 如果我设置了在检查getComputedStyle时，它仍会在转换结束之前给出非类高度。

我在这里谈论的一个样本：

<html>
    <head>
        <style>
            #foo {
                display: inline-block;
                background-color: red;
                height: 24px;
                padding: 4px 0;
                width: 200px;
                -webkit-transition-property: height;
                -webkit-transition-timing-function: linear;
                -webkit-transition-duration: 300ms;
            }
            #foo.changed {
                height: 80px;
            }
        </style>
    </head>
    <body>
        <div id="foo"></div>
        <p>before: <span id="before"></span></p>
        <p>after: <span id="after"></span></p>
        <script type="text/javascript">   
            var foo 
            function checkFoo(e) {
                foo.classList.toggle('changed');
                document.getElementById('before').innerText = window.getComputedStyle(foo, null).getPropertyValue("height");
            };

            window.addEventListener('load', function() {
                foo = document.getElementById('foo');

                foo.addEventListener('webkitTransitionEnd', function(e){
                document.getElementById('after').innerText = window.getComputedStyle(foo, null).getPropertyValue("height");
                });

                foo.addEventListener('click', checkFoo, false);
            });
        </script>
    </body>
</html>

这个示例的小提示：http://jsfiddle.net/bobbudd/REeBN/

（注意：这个小提琴只适用于webkit，它是我们所针对的一个浏览器信不信由你 - 但我也测试过并在FF中得到同样的问题）

问题是，我有多种情况需要在transitionEnd发生之前知道最终样式（有些人可能会说“计算”样式）。

或者我猜这是一个更大问题的一部分 - 有很多不同的方法来了解元素的高度，因为它是在特定的时刻，应该getComputedStyle不能得到样式表（或样式属性）所说的属性应该是吗？

在你问我是否可以将最终号码放入JS之前，答案是（不幸的是）没有。

在过渡结束之前，有人能想出一种获得最终价值的方法吗？

Answer 1

这根本不是一个错误。 getComputedStyle用于在您调用属性时返回属性的客户端呈现值。如果您在转换期间调用它，您将在转换期间获得值，如下所示：http://jsfiddle.net/REeBN/1/

您可以通过使用cssRules检查规则本身来获取规则设置的最终值。

以下是使用window.getMatchedCSSRules的实现：

cssRules = window.getMatchedCSSRules(this);
var finalCssRule = "";
for(var i = 0; i < cssRules.length; i++){
    if(cssRules[i].selectorText == "#foo.changed"){
        finalCssRule = cssRules[i];
    }
}
document.getElementById('final').innerText = finalCssRule.cssText;

以下是演示：http://jsfiddle.net/REeBN/2/

getComputedStyle和transition

1 个答案: