在CSS转换中使用JavaScript变量

Question

刚开始使用JS，所以这可能是一个新手问题。 我试图弄清楚在JS中使用以下代码行时如何使用JS变量：

But3.style.webkitTransform = "translateX(JSVARIABLE)";

在我的JS文件中，当按钮悬停在上方时，我正在运行一个函数：

HTML

<html>
<div id= "But3" class="Button3"> </div>
</html>

当该按钮悬停（鼠标悬停）时，该函数在我的JS代码中运行：

JS

But3.onmouseover = function(){

  var h = document.getElementById("But3").clientHeight;
  var w = document.getElementById("But3").clientWidth;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

   /* This may be completely wrong*/
  var x = String(nh);
  var y = String (nw)

  /* This may also be completely wrong*/
  var nhf = x + "px";
  var nwf = y + "px";

  /* This works but I need it to work with nhf */
  But3.style.webkitTransform = "translateX(10px)";

}

如何使它可以将值nhf和nwf用作我的translateX转换的值？

请注意，由于将值转换为字符串以便包含“ px”，因此我可能不正确设置值的格式。

如果需要，这是我的CSS ：

.Button3{
height: 20%;
  width: 17%;
  left: 30%;
  top: 20%;
  border-radius: 20%;
  background: #8585ad;
  margin: auto;
  position: relative;
  cursor: pointer;
  transition: 2s;
}

Answer 1

您可以将变量连接为值：

 But3.style.webkitTransform = "translateX(" + nhf + ")";

Answer 2

正如jerrylow所说，将变量连接到字符串中。 这使多余的代码变得不必要了

 document.getElementById("But3").onmouseover = function(){ var h = document.getElementById("But3").clientHeight; var w = document.getElementById("But3").clientWidth; var nh = Math.floor(Math.random() * h); var nw = Math.floor(Math.random() * w); // translateX should probably use nw instead of nh But3.style.webkitTransform = "translateX(" + nh + "px)"; }

 <input type="button" value="Hover me" id="But3">

Answer 3

您可以在模板文字中使用字符串插值来完成此操作： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 。

在您的情况下，它看起来像：

But3.style.webkitTransform = `translateX(${nhf})`;

模板文字是ES2015规范中引入的，并且受到大多数主流浏览器的支持。

在CSS转换中使用JavaScript变量

问题描述

3 个解决方案

解决方案1
2 已采纳 2019-03-29 17:54:07

解决方案2
1 2019-03-29 18:41:24

解决方案3
0 2019-03-29 18:28:49

在CSS转换中使用JavaScript变量

问题描述

3 个解决方案

解决方案1 2 已采纳 2019-03-29 17:54:07

解决方案2 1 2019-03-29 18:41:24

解决方案3 0 2019-03-29 18:28:49

解决方案1
2 已采纳 2019-03-29 17:54:07

解决方案2
1 2019-03-29 18:41:24

解决方案3
0 2019-03-29 18:28:49