转换时从Javascript获取目标样式

在转换过程中，是否有办法查看正在转换的样式规则的目标值

window.getComputedStyle

获取插值，而

element.style

只查看style属性（我想）

下面是问题的演示； 我想在转换期间检索目标高度值

1200px

：

setInterval（函数（）{
document.body.children[0].innerHTML=getComputedStyle（document.body.children[0]）['height']
}, 300)
setTimeout（函数（）{
document.body.children[0].classList.toggle（'changing'）
}，1000）

div{
高度：400px；
边框：1px纯红；
宽度：200px；
过渡：高度100s线性；
}
部门变更{
高度：1200px；
}

在

更改的
类的新实例上使用如何

您可以使用类
changing
创建一个div，然后使用
getComputedStyle
获取类属性（考虑到
changing
类的高度将是div转换后的最终高度），如下所示：

<div class="changing" id="new-changing-div"></div>

我敢肯定，所有用于请求元素高度的DOM属性和方法（clientHeight、offsetHeight、getBoundingClientRect等）都只会给出插值。另一种解决方案可能是使用从CSS样式表本身读取值

在下面的代码中，我们搜索文档的样式表，检查选择器是否存在于规则声明中，如果存在，则返回我们要查找的属性的值。您可以
console.log（）
下面样式表和规则的各个部分来查看浏览器如何将信息存储为对象

当然，这是一个基于简单测试用例的简单示例。可能有多个规则使用同一个选择器，但这只会找到第一个出现的规则。解决方案需要更加健壮，才能找到您正在寻找的确切规则


函数getCssRuleValue（选择器，属性）{
const styleSheets=document.styleSheets；
设styleSheetsLen=styleSheets.length；
while（styleSheetsLen--）{
const styleSheet=样式表[styleSheetsLen]；
const rules=styleSheet.rules；
设rulesLen=rules.length；
而（rulesLen--）{
常量规则=规则[rulesLen]；
//传入的选择器文本在规则文本中找到
if（rule.cssText.indexOf（选择器）>-1）{
返回规则.样式[属性]；
}
}
}
//在任何文档样式表中都找不到选择器/属性
返回-1；
}
setInterval（函数（）{
document.body.children[0]。innerHTML=
getComputedStyle（document.body.children[0]）['height']
+“
”+
getCssRuleValue（“.更改”、“高度”）
}, 300)
setTimeout（函数（）{
document.body.children[0].classList.toggle（'changing'）
}，1000）
div{
高度：400px；
边框：1px纯红；
宽度：200px；
过渡：高度100s线性；
}
部门变更{
高度：1200px；
}
我没有得到转换元素的计算样式，而是一个
正在更改的
类divo的新实例是的，我现在明白了。。。但是对于一个元素，它有一个应用CSS声明而不是一个类（例如，
.changing:first child
）？我的意思是，如何为自定义选择器创建第二个元素（克隆）？是的，这显然是个问题。首先，我们可能不会对转换后的元素使用这种css声明，但这使得解决方案不是最佳实践；也许可以手动覆盖克隆元素上的转换持续时间
0s
？我也有点担心创建元素克隆的成本，但必须对此进行衡量。这看起来是解决方案的正确方向。。我唯一担心的是（正如你提到的）优先规则；我想手动操作会是一场噩梦。（浏览器已经做到了这一点，所以我希望得到一个描述我错过的一些API的答案）@EoghanM我不认为这太糟糕，但很大程度上取决于您希望JS和CSS的耦合程度。您可以轻松地更改上述解决方案以查找
'div.changing'
，还可以检查规则文本是否具有相同的文本长度，这样您就知道它是完全匹配的。但是，如果您将CSS更改为
。更改
或其他内容，您还必须更新JS。在这一点上，我想说，也许你应该在JS中创建这些CSS规则，并将它们插入到样式表中（你也可以使用CSSOM来实现这一点）。然后你可以有一个变量来保存你想要的值。
const element = document.querySelector('#new-changing-div');
const heightAttribute = window.getComputedStyle(element).getPropertyValue('height');