如何在后面的代码中获取 CSS 类属性答案

【问题标题】：How to get a CSS class property in code behind如何在后面的代码中获取 CSS 类属性
【发布时间】：2022-01-26 23:24:47
【问题描述】：

我有一个 css 值，我需要从后面的代码中调用它。有人可以帮我吗？

.shape .bar .progress {位置：绝对}

.shape .pro {动画：左4s}

@keyframes 左 {100%{ 变换：旋转(180deg);}}

我可以通过以下方式调用 .shape.pro shape1.attributes.add(“class”, “pro”)

现在，我想调用@keyframes，以便我可以在后面的代码中更改旋转值.. 怎么做？

谢谢

【问题讨论】：

【解决方案1】：

是的，如果您使用 CSS 变量而不是特定值，您可以从 Javascript 更改关键帧中的某些内容。

所以在你的 CSS 中你写：

@keyframes left {100%{ transform: rotate(var(--degrees));}}

在您的 Javascript 中，您可以将变量设置为您想要的任何值：例如：

element.style.setProperty('--degrees', n + 'deg');

其中 element 是具有该动画的元素，n 是度数。

【讨论】：

【解决方案2】：

您不应该访问 @keyframe 属性。

如果您只想将角度从 0 更改为 180，则甚至不需要关键帧。

只是：

.shape .pro { 
  transform: rotate(180deg)
}

然后对于过渡效果，将其添加到您的 .shape 类中：

.shape {
  transform: rotate(0);
  transition: transform 4s
}

【讨论】：