个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
24
4
在考虑向 Chromium 提交错误时寻找解决方法 -
如果元素有过渡，getComputedStyle 不会返回您期望它返回的内容，直到过渡结束。
长和短 - 如果我有一个高度为 24px 的元素，并添加一个类使其高度为 80px(来回过渡)，并且这两个高度都在样式表中定义 - 如果我设置它class 并检查 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>
此处示例的 fiddle :http://jsfiddle.net/bobbudd/REeBN/
(注意:这个 fiddle 只能在 webkit 中工作，不管你信不信，它是我们的目标浏览器——但我也在 Firefox 中测试并遇到了同样的问题)
问题是，在多个情况下，我需要在 transitionEnd 发生之前知道最终样式(有些人可能会说“计算”样式)。
或者我想这是一个更大问题的一部分 - 有很多不同的方法可以及时了解元素在特定时刻的高度，getComputedStyle 是否应该得到样式表的内容(或样式属性)表示该属性应该是什么？
在你问我是否可以将最终数字放入 JS 之前，答案是(很遗憾)不能。
谁能想出一种在转换结束前获得最终值的方法？
最佳答案
这根本不是错误。 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/
关于javascript - getComputedStyle 和转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13655996/
24
4
0
获取元素的样式时，我们总是使用 if(document.defaultView && document.defaultView.getComputedStyle) 检查浏览器是否支持该方法。 为什么不
我目前拥有的代码获得了整个 CSS，甚至是默认的。我想要的是只更改默认的 CSS。 function baba() { addEventListener("mouseover", function
我需要为元素获取一个计算 CSS 位置，但是当使用auto 而不是数字值时，我在不同浏览器中得到的结果不一致。 例如在下面的demo中设置bottom: auto;Chrome 和 Firefox 报
我正在尝试报告我创建的椭圆形 div 的边框半径值，但我得到了一个未定义的返回值。谁能解释为什么？我是犯了一个简单的错误还是我的代码有问题？谢谢你! CSS3
我在这里设置了一个演示: http://jsbin.com/evifeb/ 这更像是我在大声思考，而不是一个适当的问题，但是.. 为什么浏览器将样式规则与辅助方法和保留字一起直接插入到计算样式对象中？
这个问题在这里已经有了答案: text-decoration: apparent discrepancy between appearance and computed values (3 个答案)
我想创建一个具有 display: none 的模拟 div 用于测试目的。但是，在测试中设置显示然后调用 getComputedStyle 显示样式没有变化，即 const parent = doc
我有一段简单的代码: var recipes = document.getElementsByClassName("recipes"); var recipesStyle = window.getCo
我正在尝试像这样获取 CSS left 属性的值... window.getComputedStyle(document.querySelector('.test'), ':after').getPr
我只是问我做错了什么，因为我以前已经做过，我只是不记得是怎么做的，我一定是把旧代码弄丢了。 Firefox 有一个未记录的颜色值，称为 -moz-win-accentcolor，可用于获取 Windo
本质上，我试图使用 getComputedStyle 来获取属性值，而无需(直接)访问元素。请阅读下面的说明以了解更多详细信息。 这很难解释，如果你不明白，请告诉我。 这是我的 CSS 代码: .yS
getComputedStyle获取text-decoration属性继承失败，但可以获取font-size。 在 Firefox 25 和 GoogleChrome 30 中失败。 Note: In
在考虑向 Chromium 提交错误时寻找解决方法 - 如果元素有过渡，getComputedStyle 不会返回您期望它返回的内容，直到过渡结束。 长和短 - 如果我有一个高度为 24px 的元素，
@media screen{ a {color:green} } @media print{ a {color:red} } 有没有一种方法可以使用 JavaScript 在打印
我处于这样一种情况，我需要等到图像被加载后，一旦图像被加载，我需要得到它的计算高度，以便我可以相应地设置黄色选择器。 问题:基于图像的计算高度，我正在设置黄色选择器。它随机与 setTimeout()
我有以下代码用于更新名为 --changeColor 的 css 变量 const r = document.querySelector(':root'); const currentColor =
我只是想知道为什么，例如，window.getComputedStyle(element).top 总是以像素为单位返回测量值，即使在设置了 top 位置的情况下也是如此像这样明确地 % elemen
getComputedStyle 的 MDN 文档州 The values returned by getComputedStyle are known as resolved values. The
我在定义 left、right 和 bottom 的元素上调用 getComputedStyle。 在 Chrome 中，它返回 'auto' 作为 top 的值，但在 Firefox 中，它返回像素
我目前遇到一个“奇怪的问题”...我是 JavaScript 的初学者，我想获取图像的高度以便设置 a 的大小。 我得到屏幕的宽度 我根据屏幕尺寸设置图像的宽度=> 我猜电脑也设置了图像的高度。 我问
我是一名优秀的程序员,十分优秀！