I want to use a Javascript function in a css property

Question

I'm creating a simple game using Javascript, Css and Html. And i created a javascript function that generate random number from 3 to 15 then it add an 's' to make the result like (15s) to use it like an animation-duration in css.

I've google it but i didn't find the sample.

Js Code :

function rand() {
   var min=3; 
   var max=15;  
   var random = Math.random() * (+max - +min) + +min;
   var time = random+'s';
   return time;
}

Css code:

.enemy {
 position: relative;
 right:300px;
 animation-name:move;
 animation-duration:(the rand() function here);
}

gomakethings.com/…

denmch
– denmch

2019-04-06 16:16:54 +00:00
Commented Apr 6, 2019 at 16:16 — denmch
– denmch, Commented Apr 6, 2019 at 16:16

Sarah Groß · Accepted Answer · 2019-04-06 16:30:29Z

2

IE once supported CSS expressions, but they were deprecated long ago and not supported by other browsers. You can set the value via JS like this:

document.querySelector('.enemy').style.animationDuration = rand() + 's';

Of course, you'll have to do this every time the content changes (i.e. when adding an element with the enemy class), you'll probably want to do this for all possible elements using querySelectorAll() instead and iterating over them, handle the case when no such element exists (thus returning null) etc.

A short example based on https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3

function rand() {
   var min=3; 
   var max=15;  
   var random = Math.random() * (+max - +min) + +min;
   var time = random+'s';
   return time;
}
var randomDuration = rand();
console.log('animation duration: ' + randomDuration);
document.querySelector('.enemy').style.animationDuration = randomDuration;

.enemy {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

<div class="enemy"></div>

edited Apr 6, 2019 at 16:30

answered Apr 6, 2019 at 16:13

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Abderrahmane Bourri Over a year ago

What should i write in the animation-duration field in css ? because nothing happend when i write this js code.

Sarah Groß Over a year ago

You could either put a default value in there or just leave it out completely. I'll try and create a short working example.

Sarah Groß Over a year ago

I added an example snippet. I overlooked that your rand() function already returns an s after the value, so that might have been the catch.

Sarah Groß Over a year ago

You're welcome, please feel free to mark my answer as accepted. Another side note: You might want to add Math.round() (or .toFixed()) into your function. Modern browsers supporting CSS animation shouldn't have a problem with that many decimal places, but you could add it just to prevent any surprises.

Abderrahmane Bourri Over a year ago

Thank you, But my code won't start, i followed step by step the instruments but nothing happened.

|

Collectives™ on Stack Overflow

I want to use a Javascript function in a css property

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related