Use the CSSOM
var style = document.documentElement.appendChild(document.createElement("style")),
rule = " run {
0% {
-webkit-transform: translate3d(0, 0, 0); }
transform: translate3d(0, 0, 0); }
}
100% {
-webkit-transform: translate3d(0, " + your_value_here + "px, 0);
transform: translate3d(0, " + your_value_here + "px, 0);
}
}";
if (CSSRule.KEYFRAMES_RULE) { // W3C
style.sheet.insertRule("@keyframes" + rule, 0);
} else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
style.sheet.insertRule("@-webkit-keyframes" + rule, 0);
}
If you want to modify a keyframe rule in a stylesheet that's already included, do the following:
var
stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify
, rules = stylesheet.rules
, i = rules.length
, keyframes
, keyframe
;
while (i--) {
keyframes = rules.item(i);
if (
(
keyframes.type === keyframes.KEYFRAMES_RULE
|| keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE
)
&& keyframes.name === "run"
) {
rules = keyframes.cssRules;
i = rules.length;
while (i--) {
keyframe = rules.item(i);
if (
(
keyframe.type === keyframe.KEYFRAME_RULE
|| keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE
)
&& keyframe.keyText === "100%"
) {
keyframe.style.webkitTransform =
keyframe.style.transform =
"translate3d(0, " + your_value_here + "px, 0)";
break;
}
}
break;
}
}
If you don't know the order but do know the URL of the CSS file, replace document.styleSheets[0]
with document.querySelector("link[href='
your-css-url.css
']").sheet
.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…