如何在 CSS 中使用 Javascript 变量？答案

【问题标题】：How to use Javascript variables in CSS?如何在 CSS 中使用 Javascript 变量？
【发布时间】：2018-08-30 08:16:50
【问题描述】：

当您单击它时，我试图使图像旋转。你点击的次数越多，它旋转的越快，如果你停止点击，它会随着时间的推移而变慢。

问题在于，在没有 jQuery 的情况下旋转对象的唯一方法是使用 CSS 中的“transform”属性（至少我所知道的）。有没有办法在 CSS 中使用 JavaScript 变量？还是有另一种方法来旋转我的图像？还是我需要使用 jQuery？

代码：

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();
      }
    }, 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";
}

#spinner {
  width: 500px;
}
#spinner {
  transform: rotate("speed"deg);
}
/* The "speed" is the variable I want to use from the JavaScript */

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <div id="spinnerContainer">
      <img id="spinner" src="http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png"/>
      <h4 id="speed">N/A</h4>
    </div>
    <div id="selectors">
      <ul>
        <button onclick="wheel()">Wheel</button>
        <button onclick="spiral()">Spiral</button>
      </ul>
    </div>
    <footer>

    </footer>
    <script src="script.js"></script>
  </body>
</html>
<!-- END -->

【问题讨论】：

据我所知，您不能在 CSS 文件中使用 javascript 变量。
不，我不知道
您不能直接在 CSS 中使用 JS 变量，但是您可以更新应用于 JS 中元素的 CSS 规则。然而，这确实不太理想。为了实现您在此处的要求，您可以使用 CSS 为轮子设置动画，并使用 JS 来触发动画
你不能用 JS 来给你的元素设置样式吗？请参阅MDN
您可以使用 javascript 指定样式。 my_element.style.transform='<transform value here>'

标签： javascript jquery html css

【解决方案1】：

你可以在css中声明变量（见规范-->https://www.w3.org/TR/css-variables/）

:root {
  --deg: 10deg;
}

然后你就可以使用它了

#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');

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

【讨论】：

【解决方案2】：

不，你不能在 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";
}

编辑：

根据Vladu Ionut's answer，我们可以在 CSS 中使用变量。优点：

它适用于现代浏览器。

缺点：

它不适用于旧浏览器，例如：
1. IE
2. 边缘
3. 铬

编辑：2，根据评论更新代码

            var spinnerImg   = undefined;
            var speedTxt     = undefined;
            var wheelImgUrl  = "http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png";
            var spiralImgUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Black_bold_spiral.svg/2000px-Black_bold_spiral.svg.png";
 
            var speed           = 0;
            var maxSpeedChange  = 10;
            var slowSpeed       = 2;
            var speedParam      = slowSpeed;

            /**
            * Function to change the image to wheel
            *
            * @Arguments: none
            *
            * @Returns: void
            */
            function changeToWheel() {
                spinnerImg.src = wheelImgUrl;
            }

            /**
            * Function to change the image to spiral
            *
            * @Arguments: none
            *
            * @Returns: void
            */
            function changeToSpiral() {
                spinnerImg.src = spiralImgUrl;
            }

            /**
            * Function to update speed display
            *
            * @Arguments: void
            *
            * @Returns: void
            */
            function updateSpeedTxt() {
                speedTxt.innerHTML = speed;
            }

            /**
            * @Function to rotate the image
            *
            * @Arguments: void
            *
            * @Returns: void
            */
            function rotateImg() {
                spinnerImg.style.transform = "rotate(" + speed + "deg)";
            }

            window.addEventListener("load", function() {
                spinnerImg = document.getElementById("spinner");
                speedTxt   = document.getElementById("speed");
                speed = speedParam;
                setInterval(function() {
                    updateSpeedTxt();
                    rotateImg();
                    if (speedParam > slowSpeed) {
                        speedParam -= 0.05;
                    }
                    if (speedParam < slowSpeed) {
                        speedParam = slowSpeed;
                    } 
                    speed += speedParam;
                }, 50); 


                spinnerImg.addEventListener("click", function() {
                    speedParam += maxSpeedChange; 
                });

            });

            #spinner {
                width: 500px;
                transform-origin: center;
            }

<!DOCTYPE html>
<html>
    <head> 
    </head>
    <body>
        <div id="spinnerContainer">
            <img id="spinner" src="http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png"/>
            <h4 id="speed">N/A</h4>
        </div>
        <div id="selectors">
            <ul>
                <button onclick="changeToWheel()">Wheel</button>
                <button onclick="changeToSpiral()">Spiral</button>
            </ul>
        </div>
        <footer>

        </footer> 
    </body>
</html>

【讨论】：

谢谢！但我遇到的唯一问题是，当速度降低时，车轮开始以相反的方式旋转？我怎样才能解决这个问题？（我正在尝试复制网站gurka.se）
慢速和速度变量默认值是多少？

【解决方案3】：

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

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;
  }
    document.getElementById("spinner").style.transform = "rotate(" + speed + "deg)";

}

spinner.addEventListener('click', spin);

//Slowdown
function loop() {
  setTimeout(
    function slow() {
      speed = speed - slowSpeed;
      document.getElementById("speed").innerHTML = speed;
      if (speed > 0) {
        loop();
      }
    }, 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";
}

#spinner {
  width: 500px;
}
#spinner {
  transform: rotate(90deg);
}
/* The "speed" is the variable I want to use from the JavaScript */

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <div id="spinnerContainer">
      <img id="spinner" src="http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png"/>
      <h4 id="speed">N/A</h4>
    </div>
    <div id="selectors">
      <ul>
        <button onclick="wheel()">Wheel</button>
        <button onclick="spiral()">Spiral</button>
      </ul>
    </div>
    <footer>

    </footer>
    <script src="script.js"></script>
  </body>
</html>
<!-- END -->

【讨论】：

【解决方案4】：

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

var box = document.getElementById('box');
var speed = 0;
var countdown;
box.addEventListener('click', function(e) {
  if(speed === 3) return;
  speed++;
  box.className = "box-"+speed;
  clearInterval(countdown);
})

box.addEventListener('mouseout', function(e) {
  countdown = setInterval(function(){ 
    if(speed === 0) {
      clearInterval(countdown);
    } else {
      speed --;
      box.className = "box-"+speed;
    }
  }, 2000);
})

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 250px;
  left: 250px;
}

#box:hover{
  cursor: pointer;
}

.box-1 {
		-webkit-animation: rotation 3s infinite linear;
}

.box-2 {
		-webkit-animation: rotation 2s infinite linear;
}

.box-3 {
		-webkit-animation: rotation 1s infinite linear;
}


@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>spin box animation</title>
</head>
<body>
  <div id="box"></div>
</body>
</html>

【讨论】：