Best IT Recipes

CSS background color in JavaScript

How to set the background color of an HTML element HTML using JavaScript?

+105
javascript background-color css
Aug 6 '08 at 12:23
source share
15 answers

In general, CSS properties are converted to JavaScript, making them camelCase without a dash. So background-color becomes backgroundColor .

 function setColor(element, color) { element.style.backgroundColor = color; }
+151
Aug 6 '08 at 12:25
source share

You may find that your code is more convenient to maintain if you keep all your styles, etc. in CSS and just set / remove class names in JavaScript.

Your CSS will obviously be something like:

 .highlight { background:#ff00aa; }

Then in JavaScript:

 element.className = element.className === 'highlight' ? '' : 'highlight';
+29
Aug 19 '08 at 11:59
source share

var element = document.getElementById('element'); element.style.background = '#FF00AA';

+23
Aug 06 '08 at 12:25
source share

Or using a little jQuery:

 $('#fieldID').css('background-color', '#FF6600');
+20
Aug 6 '08 at 13:23
source share

Add this script element to your body element:

 <body> <script type="text/javascript"> document.body.style.backgroundColor = "#AAAAAA"; </script> </body>
+7
Mar 03 2018-11-21T00:
source share

 var element = document.getElementById('element'); element.onclick = function() { element.classList.add('backGroundColor'); setTimeout(function() { element.classList.remove('backGroundColor'); }, 2000); }; 
 .backGroundColor { background-color: green; } 
 <div id="element">Click Me</div>
+6
Apr 17 '15 at 16:07
source share

You can do this with jQuery:

 $(".class").css("background","yellow");
+4
Feb 10 '14 at 17:13
source share

You can try this

 var element = document.getElementById('element_id'); element.style.backgroundColor = "color or color_code";

Example.

 var element = document.getElementById('firstname'); element.style.backgroundColor = "green";//Or #ff55ff

JSFIDDLE

+4
03 Sep '15 at 12:21
source share

KISS answer:

 document.getElementById('element').style.background = '#DD00DD';
+3
Mar 01 '13 at 23:57
source share

You can use:

  <script type="text/javascript"> Window.body.style.backgroundColor = "#5a5a5a"; </script>
+3
Jan 05 '14 at 12:51 on
source share
 $("body").css("background","green"); //jQuery document.body.style.backgroundColor = "green"; //javascript

so many ways, I think it is very easy and simple

Demo on plunker

+3
Mar 13 '17 at 20:51
source share
 $('#ID / .Class').css('background-color', '#FF6600');

With jquery, we can target an element class or Id to apply a css background or any other styles

+3
Jun 23 '17 at 9:56 on
source share

you can use

 $('#elementID').css('background-color', '#C0C0C0');
+1
Apr 11 '14 at 1:34
source share

JavaScript:

 document.getElementById("ID").style.background = "colorName"; //JS ID document.getElementsByClassName("ClassName")[0].style.background = "colorName"; //JS Class

Jquery:

 $('#ID/.className').css("background","colorName") // One style $('#ID/.className').css({"background":"colorName","color":"colorname"}); //Multiple style
0
Jun 23 '17 at 10:02
source share
 $(".class")[0].style.background = "blue";
-one
Nov 11 '15 at 8:44
source share


More articles:


All Articles