将Javascript变量发送到.css（{transform：translate（var，var）}）

Question

我想通过transform属性向右移动div 136px，所以我写道：`

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

和the_div类包含

.the_div
{
  transition-duration:2s;
}

并且它起作用了，但是现在我想发送一个javascript变量而不是136px。那可能吗？我怎样才能做到这一点？像]这样的变量

var my_width = window.innerwidth * 0.1;
我写道

$(".the_div").css({"transform":"translate(my_width+'px',0px)"});
它显然没有用。您是否有想法将div屏幕宽度的十分之一向右移动（使用transform属性）？

我想通过transform属性将div的136px右移，所以我写道：`$（“。the_div”）。css（{“ transform”：“ translate（136px，0px）”}））; the_div类包含.the_div {transition-duration：2s; } ...

Answer 1

简单地说，您只需要在javascript " + my_width + "中的字符串中连接变量”>

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

Answer 2

您也可以使用模板字符串在纯Javascript中执行此操作。（PS-您甚至不需要JQuery）