堆栈内存溢出
  繁体   English   中英

如何在CSS中使用Javascript变量？

[英]How to use Javascript variables in CSS?

 原文  2018-03-21 09:27:47  7   4    javascript/ jquery/ html/ css

问题描述

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

问题在于，不使用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 -->

4 个解决方案

解决方案1
 6  2018-03-21 09:38:41

您可以在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％ 支持CSS变量

解决方案2
 4 已采纳  2018-03-21 09:36:13

不，您不能在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的回答 ，我们可以在CSS中使用变量。 好处：

  1. 它适用于现代浏览器。

缺点：

  1. 在旧的浏览器中，例如：
    1. IE浏览器
    2. 边缘<= 15
    3. 铬<49，等等。

编辑：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>

解决方案3
 1  2018-03-21 09:41:36

答案是否定的。 您不能在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
 0  2018-03-21 10:11:13

如果您想减少样板，可以使用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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在CSS变量中使用CSS变量来更改图像？ 如何使用 CSS 全局变量？ 如何在JavaScript中使用CSS 如何在Grunt中的JavaScript中使用变量 如何在javascript中使用类型变量？ 如何在javascript中使用php变量 如何在HTML中使用JavaScript变量 如何在Ruby中使用JavaScript变量 如何将 javascript 变量导入 CSS 并设置它们的样式？ 如何使用 JavaScript 创建 CSS 变量？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM