How to use JavaScript variable in CSS style?

Question

Actually I want something like that:

var color = #000;

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

Please help me.

Thank you.

simple string concatenation – Pranav C Balan Apr 07 '20 at 19:05 — Pranav C Balan, Apr 07 '20 at 19:05

WillD · Answer 1 · 2020-04-07T19:10:51.590

4

If you can use ES6 then a template literal is a good choice here. It uses backticks instead of other types of quotes.

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}`});

edited Apr 07 '20 at 19:10

answered Apr 07 '20 at 19:08

WillD

5,170
6
27
56

Looks like you beat me by 4 seconds, great minds :) – robbieAreBest Apr 07 '20 at 19:09
1

color should be a string though, – Nikos M. Apr 07 '20 at 19:10
Good point. Ill update – WillD Apr 07 '20 at 19:10
It's not working. – Apr 07 '20 at 19:13
Did you see the note about your `var color = #000` missing quotes? – WillD Apr 07 '20 at 19:13
No i didn't see this. – Apr 07 '20 at 19:15

score 1 · Answer 2 · answered Apr 07 '20 at 19:08

1

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

answered Apr 07 '20 at 19:08

robbieAreBest

1,601
14
16

score 1 · Accepted Answer · answered Apr 07 '20 at 19:26

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>

How to use JavaScript variable in CSS style?

3 Answers3