如何在CSS中使用Javascript变量？

当你点击图片时，我试图让它旋转。你点击的次数越多，它旋转的速度就越快，如果你停止点击，它会随着时间的推移而变慢

问题是，在没有jQuery的情况下旋转对象的唯一方法是使用CSS中的“transform”属性（至少据我所知）。有没有办法在CSS中使用JavaScript变量？还是有其他方法可以改变我的形象？还是我需要使用jQuery

代码：

var spinner=document.getElementById（“spinner”）；
var速度=0；
var-addSpeed=10；
var慢速=2；
//激活减速
window.onload=loop（）；
//加速
函数自旋（）{
如果（速度<0）{
速度=速度+10；
循环（）
}否则{
速度=速度+10；
}
}
spinner.addEventListener（'click'，spin）；
//减速
函数循环（）{
设置超时(
函数慢（）{
速度=速度-慢速度；
document.getElementById（“速度”）.innerHTML=速度；
如果（速度>0）{
loop（）；
}
}, 1000)
}
//选择器
功能轮（）{
spinner.src=”http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png";
}
函数螺旋（）{
spinner.src=”https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Black_bold_spiral.svg/2000px-Black_bold_spiral.svg.png";
}

#微调器{
宽度：500px；
}
#纺纱机{
变换：旋转（“速度”度）；
}
/*“速度”是我想从JavaScript中使用的变量*/

不适用

车轮
螺旋形的

不，您不能在css中使用javascript变量，但可以通过javascript的DOM元素style属性动态更改元素的样式

document.getElementById("speed").style.transform = "rotate(" + speed + "deg)";

就你而言：

var spinner = document.getElementById("spinner");
var speed = 0;
var addSpeed = 10;
var slowSpeed = 2;

//Activates Slowdown
window.onload = loop();

//Speed up
function spin() {
  if (speed < 0) {
    speed = speed + 10;
    loop()
  } else {
  speed = speed + 10;
  }
}

spinner.addEventListener('click', spin);

//Slowdown
function loop() {
  setTimeout(
    function slow() {
      speed = speed - slowSpeed;
      document.getElementById("speed").innerHTML = speed;
      if (speed > 0) {
        loop();
      }

      document.getElementById("speed").style.transform = "rotate(" + speed + "deg)";

    }, 1000)
}

//Selectors
function wheel() {
  spinner.src = "http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png";
}
function spiral() {
  spinner.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Black_bold_spiral.svg/2000px-Black_bold_spiral.svg.png";
}

不适用

车轮
螺旋形的

您可以在css中声明变量（请参阅规范-->）

然后你就可以使用它了

#spinner {
  transform: rotate( var(--deg));
}

如何使用JavaScript访问变量

获取

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var deg= rootStyles.getPropertyValue('--deg');
console.log(deg); 
--> 10deg

root.style.setProperty('--deg', '20deg');

设置

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var deg= rootStyles.getPropertyValue('--deg');
console.log(deg); 
--> 10deg

root.style.setProperty('--deg', '20deg');

---

目前，全球网站流量的88%

答案是否定的。您不能在css中使用javascript变量。但您可以使用javascript应用css样式。这是你问题的答案

var spinner=document.getElementById（“spinner”）；
var速度=0；
var-addSpeed=10；
var慢速=2；
//激活减速
window.onload=loop（）；
//加速
函数自旋（）{
如果（速度<0）{
速度=速度+10；
循环（）
}否则{
速度=速度+10；
}
document.getElementById（“微调器”）.style.transform=“旋转（“+speed+”deg）”；
}
spinner.addEventListener（'click'，spin）；
//减速
函数循环（）{
设置超时(
函数慢（）{
速度=速度-慢速度；
document.getElementById（“速度”）.innerHTML=速度；
如果（速度>0）{
loop（）；
}
}, 1000)
}
//选择器
功能轮（）{
spinner.src=”http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png";
}
函数螺旋（）{
spinner.src=”https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Black_bold_spiral.svg/2000px-Black_bold_spiral.svg.png";
}

#微调器{
宽度：500px；
}
#纺纱机{
变换：旋转（90度）；
}
/*“速度”是我想从JavaScript中使用的变量*/

不适用

车轮
螺旋形的

如果您想简化样板文件，可以使用sass mixin为您生成所有速度级别的类

var-box=document.getElementById（'box'）；
var速度=0；
var倒计时；
box.addEventListener（'click'，函数（e）{
如果（速度===3）返回；
速度++；
box.className=“box-”+速度；
清除间隔（倒计时）；
})
框.addEventListener（'mouseout'，函数（e）{
倒计时=设置间隔（函数（）{
如果（速度===0）{
清除间隔（倒计时）；
}否则{
速度--；
box.className=“box-”+速度；
}
}, 2000);
})

#框{
宽度：100px；
高度：100px；
背景色：红色；
位置：绝对位置；
顶部：250px；
左：250px；
}
#框：悬停{
光标：指针；
}
.框-1{
-webkit动画：旋转3s无限线性；
}
.方框-2{
-webkit动画：旋转2s无限线性；
}
.方框-3{
-webkit动画：旋转1s无限线性；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
}
}

旋转盒动画

据我所知，您不能在CSS文件中使用javascript变量。不，我不知道您不能在CSS中直接使用JS变量，但是您可以更新应用于JS中元素的CSS规则。然而，这并不理想。为了实现您在这里所需要的，您可以使用CSS来设置轮子的动画，使用JS来触发动画。您不能使用JS来设置元素的样式吗？请参见，您可以使用javascript指定样式<代码>我的元素.style.transform=''谢谢！但我遇到的唯一问题是，当速度降低时，车轮开始以相反的方向旋转？我怎样才能解决这个问题？（我正在尝试制作网站的副本）默认情况下慢速和速度变量的值是多少？