如何在 CSS 样式中使用 JavaScript 变量？ [复制]答案

【问题标题】：How to use JavaScript variable in CSS style? [duplicate]如何在 CSS 样式中使用 JavaScript 变量？ [复制]
【发布时间】：2020-07-20 02:07:32
【问题描述】：

其实我也想要这样的：

var color = #000;

$(".div").find("li").css({"border-left": '5px solid [`I want to add this variable (color) here`]});

请帮助我。

谢谢。

【问题讨论】：

简单的字符串拼接

标签： javascript html css

【解决方案1】：

如果你可以使用 ES6，那么模板文字是一个不错的选择。它使用反引号而不是其他类型的引号。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

var color = "#000"; //change this to be a string as @Nikos mentioned

$(".div").find("li").css({"border-left": `5px solid  ${color}`});

【讨论】：

看起来你比我快 4 秒，伟大的思想 :)
color 应该是一个字符串，
好点。生病更新
它不工作。
您看到关于您的var color = #000 缺少引号的注释了吗？

【解决方案2】：

var color = "#00f";
$("#button").click(function(){
  $("div").css({"border": "5px solid " + color});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Add Border</button>
<div>Hi, I am a div</div>

【讨论】：

【解决方案3】：

$(".div").find("li").css({"border-left": `5px solid ${color}`});

【讨论】：