Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 381
  • Last Modified:

assign javascript var to div style

I have a javascript string variable for background color.
<script>  var  bg_color="black"; </script>
How do I assign this var to div background-color?
<div class="wrapper" style="background-color:??????">
0
yaron89
Asked:
yaron89
  • 3
  • 3
  • 2
1 Solution
 
LZ1Commented:
Just so you know, it's a very bad practice to have inline styles on your page. Why aren't you setting this on the class or ID of the element instead?
0
 
yaron89Author Commented:
I have to change it dynamically
0
 
LZ1Commented:
I would use jQuery, because for me it's easier.
There's 2 ways of doing it. 1 would be to set it inline like you have above. The 2nd and the one I would use would be to add a class that overrides the default styling.

$(document).ready(function(){
     $(".wrapper").click(function(){
	//$(this).css("background", "#000000")
           $(this).addClass("black");
	});
});

Open in new window


You can replace the click function with whatever you need.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Chris StanyonCommented:
Without jQuery, something like this:

<script type="text/javascript">
var bg_color = '#ff0000';
			
function setBg(element) {
	element.style.backgroundColor = bg_color;
}
</script>

<div class="wrapper" onclick="setBg(this)">This is a test</div>

Open in new window

0
 
yaron89Author Commented:
It works with onclick event but not with onload. I need to change the background when the page is loading.
0
 
LZ1Commented:
Then just this:
			$(document).ready(function(){
				$('.wrapper').addClass("black");
				});

Open in new window

0
 
Chris StanyonCommented:
Give the relevant DIV an ID (so you can select it when loading) and then use the following:

<script type="text/javascript">
var bg_color = '#ff0000';
			
function setBg(element) {
	x = document.getElementById(element);
	x.style.backgroundColor = bg_color;
}
<script>

<body onLoad="setBg('myDiv')">
	<div id="myDiv" class="wrapper">This is a test</div>
</body>

Open in new window

0
 
yaron89Author Commented:
Thank you
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now