js动态修改@keyframes

封装getKeyframes()函数

function getKeyframes(keyframesName){//通过定义的动画函数名来查询函数let styleSheet = document.styleSheets;//获取所有样式表let animation={};//定义一个animation来装获得的值for (let i = 0; i < styleSheet.length; i++) {//遍历循环获取styleSheetfor (let j = 0; j < styleSheet[i].cssRules.length; j++) {//遍历循环获取styleSheet[i].cssRules//判断样式名字是否为CSSKeyframesRuleif (styleSheet[i].cssRules[j].constructor.name === 'CSSKeyframesRule'){//再判断此时这个动画函数名是否为传入的值if (keyframesName === styleSheet[i].cssRules[j].name){//获取此时的cssRules，index，和styleSheetanimation.cssRules = styleSheet[i].cssRules[j];animation.index = j;animation.styleSheet = styleSheet[i]return animation//返回获取的animation}}}}
}

修改keyframes

let s = getKeyframes('slide');//通过封装的函数来获取名字为slide的keyframes函数
s.styleSheet.deleteRule(s.index);//通过index删除之前的keyframes函数
let insertKeyframes = '@keyframes slide{\n' +'            0%{\n' +'                left: 0;\n' +'            }\n' +'            100%{\n' +'                left: 100px;\n' +'            }\n' +'        }'
s.styleSheet.insertRule(insertKeyframes,s.index);//将修改后的函数和index添加进样式表

js动态修改@keyframes相关推荐

JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案
JS动态修改页面EasyUI datebox不生效.EasyUI动态添加Class.EasyUI动态渲染解析解决方案参考文章: (1)JS动态修改页面EasyUI datebox不生效.EasyUI ...
js动态修改表格数据
js动态修改表格数据使用js在表格个内进行动态修改,需要再点击每一个td的时候在每个td里动态的添加一个input文本框然后把input的样式设计一下与td的宽度和高度一致去掉input的内外边框 ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
JS动态修改单网页web应用在微信浏览器中的title
利用JS动态修改单网页web应用在微信浏览器中的title 最近做一个微信端项目,主要内容都是采用单页面web,之前做微信端,以营销H5居多,绝大多数也都是单网页,营销H5一般一个标题通吃,修改分享标 ...
js动态变量名_scss引入其他scss变量，并通过js动态修改scss变量
a.scss .test{ background:red;} 1 2 3 b.scss $bgColor: red; 1 1.a.scss需要引入b.scss中的变量 a.scss(只要引入成功后,修 ...
java 页签标题名的设置_javascript修改浏览器title方法 JS动态修改浏览器标题
title在html中属于特殊的节点元素.因为它可以使用document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用do ...
js动态修改path值 svg_svg关于animateMotion动态改变path路径来控制svg元素移动
用js动态改变animateMotion的path属性要控制移动的元素只有第一次的时候可以滑动,我用的定时器模拟的后台推过来的数据(用于控制元素移动的坐标)但是只能在第一次的时候可以滑动,然后调试发 ...
前端| js动态修改video标签视频不刷新的问题
问题描述:在网页上用<video>标签放一个视频播放器,点击视频目录来自动播放不同的视频.通过js动态生成li,点击li之后更改<video>标签<source>中 ...
js动态修改html标签属性,通过js动态创建标签,并设置属性方法
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...

js动态修改@keyframes

js动态修改@keyframes

封装getKeyframes()函数

修改keyframes

js动态修改@keyframes相关推荐

最新文章

热门文章