提问人：Yiğit Er 提问时间：5/29/2021 更新时间：5/29/2021 访问量：168
使用 Javascript 更改 CSS @keyframe值 [duplicate]
Changing CSS @keyframe value with Javascript [duplicate]
问：
我有以下CSS关键帧：
@keyframes progressStatus
{
to
{
stroke-dashoffset: 165;
}
}
我正在尝试使用 Javascript 将值 165 更改为其他内容。
答：
2赞
A Haworth
5/29/2021
#1
对于这个特定示例，您可以使用 CSS 变量。
这个简单的代码片段会在每次单击 div 时更改一个名为 --strokeDashoffset 的变量（并在有动画和没有动画之间切换，仅用于演示）。
div {
--strokeDashoffset: 165px; /* initial position */
background-color: magenta;
width: var(--strokeDashoffset);
height: 5vmin;
animation: none;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-iteration-count: 1;
}
.strokeDashoffset {
animation-name: progressStatus;
}
@keyframes progressStatus
{
to
{
stroke-dashoffset: var(--strokeDashoffset);
}
}<div onclick="this.classList.toggle('strokeDashoffset'); this.style.setProperty('--strokeDashoffset', Math.random(0,1)*100 + 'vmin');" >CLICK ME</div>
1赞
kdau
5/29/2021
#2
虽然另一个答案中的 CSS 变量方法更好，但这里有一个直接修改相关 CSS 的方法，因为我已经输入了它。如果您不能依赖 CSS 自定义属性（变量）或 polyfill，这可能很有用。
在 CSS 对象模型中，规则具有自己的子规则数组，这些子规则与关键帧本身（和/或百分比）相对应。因此，如果你的示例是文档中的第一个样式表（并且没有其他规则）：@keyframesfromto
const stylesheet = document.stylesheets[0];
const progressStatus = stylesheet.cssRules[0];
const toKeyframe = progressStatus.cssRules[0];
toKeyframe.style.strokeDashoffset = '170 80'; // or whatever desired value
通过数组索引选择样式表和嵌套规则是很麻烦的，容易出错，并且很容易因更改而中断。在生产代码中，您至少希望通过使用各种测试遍历所有规则来查找规则，例如 .rule.type === CSSRule.KEYFRAMES_RULE && rule.name === 'progressStatus'
评论