js添加、删除@keyframes

@keyframes规则是用来定义css动画：

@keyframes name{
0{
/*
状态起始
... ...
left: 0;
*/
}
50%{
/*
状态起始
... ...
left: 50%;
*/
}
100%{
/*
状态起始
... ...
left: 100%;
*/
}
}

html标签添加动画：

div{
animation: name;
}

但有时动画的效果是需要计算动态生成的，这时我们就需要JS进行动态生成@keyframes规则。

解决思路：

1、首先我们需要获取css的样式表

// 获取所有css样式表
let styles = document.styleSheets;

获取结果：

StyleSheetList {0: CSSStyleSheet, length: 1}

这其实是一个Object类型而不是Array类型。StyleSheetList对象中的CSSStyleSheet就是一张样式表（按style、link标签为单位生成?）。

2、根据这个StyleSheetList对象，筛选需要添加到的CSSStyleSheet中（这不主要是为了规范，其实放哪里都一样）

// 根据href
let style = null;
for(p in styles){
if(styles[p].href.search(/xxx.css/)){//要匹配的css
style = styles[p];
}
}

3、通过CSSStyleSheet的insertRule(rule [, index])进行添加@keyframes

style.insertRule(`@keyframes name {
0 { left: 0px; }
20% { left: 0px; }
100% { left: 200px; }
}`, 0);

插入成功后长这样：

CSSKeyframesRule {name: "content", cssRules: CSSRuleList, type: 7, cssText: "@keyframes content { ↵ 0% { left: 1536px; }↵ 100% { left: -5100px; }↵}", parentRule: null, …}

insertRule在CSSStyleSheet中生成了一个CSSKeyframesRule

4、如果要删除css规则，则通过CSSStyleSheet的removeRule(index)即可。不过需要遍历一下CSSStyleSheet.name在查找需要删除rule的index

5、其实直接js动态生成一个style标签会比较简单，通用

用这个写了一个字幕轮播效果：https://shahow.top/blackboard/

最后

以上就是正直乌龟为你收集整理的js添加、删除@keyframesjs添加、删除@keyframes的全部内容，希望文章能够帮你解决js添加、删除@keyframesjs添加、删除@keyframes所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。