动态设置css的样式，例如@keyframes，根据Vue不同需求动态设置内容

直接使用document.styleSheets获取动态代码块，然后插入相关规则，使用.chartLeft自己命名的名称在标签中直接调用名称就能使用。针对一些vue中需要动态更改数据变量，然后改变style的需求，用这种方法可以实现动态数据的变化。

weixin_43848098

948人浏览 · 2023-08-11 11:15:48

weixin_43848098 · 2023-08-11 11:15:48 发布

document.styleSheets[0].insertRule(
        `@keyframes animaKey${index}{
        0%{
          left:${start}px
        }
        100%{
          left:${(-820 / 8) * end.length + 820}px
        }
      }`
      );
      document.styleSheets[0].insertRule(`.chartLeft${index}{
        animation:animaKey${index} ${end.length * 2}s linear;
      }`);

直接使用document.styleSheets获取动态代码块，然后插入相关规则，使用.chartLeft自己命名的名称在标签中直接调用名称就能使用。针对一些vue中需要动态更改数据变量，然后改变style的需求，用这种方法可以实现动态数据的变化