getComputedStyle和转换
当我考虑向Chromium提交一个bug时，我正在寻找一个解决办法-
如果一个元素有一个转换，在转换结束之前，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中工作，信不信由你，它是我们的目标浏览器--但我也测试过，在Firefox中也遇到了同样的问题)
问题是，我有很多情况需要在transitionEnd发生之前知道最终的样式(有些人可能会说是“计算”样式)。
或者我猜这是一个更大的问题的一部分-有这么多不同的方法来知道元素在特定时刻的高度，getComputedStyle不应该得到样式表(或样式属性)所说的属性应该是什么吗？
在您问我是否可以将最后一个数字放在JS中之前，答案是(不幸的)不可以。
有没有人能想出在转换结束之前获得这个最终值的方法？
回答 1
Stack Overflow用户
发布于 2012-12-01 23:59:41
这根本不是一个bug。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/
https://stackoverflow.com/questions/13655996
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号