Send Javascript Variable To .css({transform: Translate (var,var)})

I wanted to move a div 136px to right with transform property so i wrote: ` $('.the_div').css({'transform':'translate(136px,0px)'}); and the_div class contains .the_div { transi

Solution 1:

simply you just need concatenate variable in string in javascript " + my_width + "

$(".the_div").css({"transform":"translate(" + my_width + "px,0px)"});

Solution 2:

You can do this in pure Javascript as well using template strings. (PS - you don't even need JQuery)

First, save the div in a variable

const theDiv = document.querySelector('.the_div');

Second, save the value you want to translate in a variable

letnumber = 136;

Lastly, set the style attribute of the div

theDiv.style.transform = `tranlate(${number}px,0)`;

Hope this helps answer your question

Here is a helpful link for template strings https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals