【问题标题】：Can I style an element with JavaScript variable? [duplicate]我可以使用 JavaScript 变量设置元素的样式吗？ [复制]
【发布时间】：2020-05-13 07:35:39
【问题描述】：

我正在尝试制定费用进度条。我已经用 JavaScript 计算了进度宽度的百分比，它是一个变量z。所以我试图用变量z 设置元素的样式，当我向它添加% 时它不起作用。这是我的代码：

<html>
<body>
  <div class="mybar">
    <div class="myprogress" id="progress">
    </div>
  </div>
  <script>
    window.onload=function(){
      var fee=document.getElementById("fee").innerHTML;
      var bill=document.getElementById("bill").innerHTML;
      var y=(fee/bill);
      var z=(y*100);
      document.getElementById("progress").style.width="z%";
    }
  </script>
</body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

你可以使用string template literals

像这样：

document.getElementById("progress").style.width=`${z}%`;

【讨论】：

【解决方案2】：

由于z 是一个变量，并且您想在之后创建一个带有% 符号的字符串，您需要附加它们：

 document.getElementById("progress").style.width = z + '%';

【讨论】：

或使用模板文字：document.getElementById("progress").style.width=`${z}%`;

【解决方案3】：

使用 JavaScript 设置样式的可用方法摘要。

纯 Javascript

连接 z 和百分号：

document.getElementById("progress").style.width = z + "%";

或者使用字符串模板文字：

document.getElementById("progress").style.width=`${z}%`;

jQuery

$("#progress").css("width", z + "%");

或

$("#progress").css("width", `${z}%`);

【讨论】：

@JasonPerchingBird 您可以使用旁边的灰色勾号接受您认为最有帮助的答案...