Question

我做了一次详尽的搜索，试图找到一个解决我问题的主题，希望这不是重复。对不起，如果我的英语混乱，我不是原生的。

我尝试使用CSS和JavaScript将两个预定义变量中的值传递给我的translate（x，y）值。我尝试了以下内容及其中的一些变体：

CSS

*
@keyframes bounce {
0% {
transform: translate(0em, 0em);
}
100% {
transform: translate(10em, 10em);
}
}

Javascript

var x = 5em;
var y = 5em;
var stylesheet = document.styleSheets[0];
var ruleBounce = stylesheet.cssRules[0];
var ruleBounce_To = ruleBounce.cssRules[1];
ruleBounce_To_Style = ruleBounce_To.style;
ruleBounce_To_Style.cssText = 'transform: translate('+x+'em, '+y+'em)';

但它似乎并没有起作用。它只是清空了cssText字段。我也尝试将cssText放入变量然后更改它。谢谢你的帮助！

Answer 1

您有一个错字var x = 5em;它应该是5，因为您稍后会添加em。
CSSRule.cssText：


cssText返回CSSStyleSheet样式规则的实际文本。

注意：不能再像now specified那样直接设置   功能性仅修改 - 和静默所以 - 意味着   试图设置它确实绝对没有 - 甚至没有警告或   错误。此外，它没有可设置的子属性。因此，到   修改，使用样式表的cssRules [index]属性.selectorText   和.style（或其子属性）。有关详细信息，请参阅Using dynamic styling information。

var x = 5; // not 5em
var y = 5; // not 5em
var stylesheet = document.styleSheets[0];
var ruleBounce = stylesheet.cssRules[0];
var ruleBounce_To = ruleBounce.cssRules[1];
ruleBounce_To_Style = ruleBounce_To.style;

console.log(ruleBounce_To_Style.cssText);

ruleBounce_To_Style.transform = 'translate(' + x + 'em, ' + y + 'em)'; // see what you put here

console.log(ruleBounce_To_Style.cssText);

@keyframes bounce {
  0% {
    transform: translate(0em, 0em);
  }
  100% {
    transform: translate(10em, 10em);
  }
}

JavaScript + CSS - 修改2d动画的cssText

1 个答案: