How to use Javascript variables in CSS?

Question

Im trying to make an image spin when you click it. The more you click it the faster it spins, and if you stop clicking it will slow down over time.

The problem is that the only way to spin an object without jQuery is with the "transform" property in CSS (What I know of at least). Is there any way to use JavaScript variables in CSS? Or is there another way to spin my image? Or will I need to use jQuery?

Code:

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 -->

You can't use a javascript variable inside your CSS file, Not to my knowledge. — Carsten Løvbo Andersen, Mar 21 '18 at 09:29
You cannot directly use a JS variable in CSS, however you can update the CSS rules applied to an element in JS. However that is really not ideal. To achieve what you require here you can use CSS to animate the wheel and JS to trigger the animation — Rory McCrossan, Mar 21 '18 at 09:32
Can't you set style on your element using JS instead? See on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) — barbsan, Mar 21 '18 at 09:33
You can assign style using javascript. `my_element.style.transform=''` — Stphane, Mar 21 '18 at 09:33
https://stackoverflow.com/questions/16771225/css3-rotate-animation — Wils, Mar 21 '18 at 09:35
check this -> https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0 — Martin Chaov, Mar 21 '18 at 09:37
document.getElementById('speed').style.transform = "rotate("+speed+"deg)"; — Super User, Mar 21 '18 at 09:39

Vladu Ionut · Answer 1 · 2018-03-21T09:49:34.040

You can declare variables in css (See the specifications--> https://www.w3.org/TR/css-variables/)

:root {
  --deg: 10deg;
}

and then you can use it

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

How to access variables with JavaScript

get

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

set

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

Currently, 88 percent of global website traffic supports CSS Variables

Dinesh Patra · Accepted Answer · 2018-03-21T10:59:57.083

No, you can not use javascript variables inside css, but you can change the style of an element dynamically via javascript's DOM elements, style property.

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

In your case:

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";
}

EDIT:

As per Vladu Ionut's answer , we can use variables in CSS. Advantages:

It works in modern browsers.

Disadavantage:

It does not work in old browsers like:
1. IE
2. EDGE <= 15
3. Chrome < 49, etc.. ... ...

EDIT:2, Update the code, as per the comment

            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>

Thanks! But the only problem I ran into is that when the speed decreases the wheel starts spinning the opposite way? How can I fix this? (I'm trying to make a replica of the website http://www.gurka.se/) — nan, Mar 21 '18 at 10:09
What is the value of slow speed and speed variable by default ? — Dinesh Patra, Mar 21 '18 at 10:25

Deepu Reghunath · Answer 3 · 2018-03-21T09:52:54.963

Answer is no. you can not use a javascript variable inside css. But you can apply css style using javascript. here is the solution for your question

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 -->

score 0 · Answer 4 · answered Mar 21 '18 at 10:11

If you want to reduce boilerplate you could use sass mixin to generate all speed level classes for you;

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>

How to use Javascript variables in CSS?

4 Answers4