<p>How can I set the background color of an HTML element using css in JavaScript?</p>

[{'answer_id': 3320, 'author': 'tags2k', 'author_id': 192, 'author_profile': 'https://Stackoverflow.com/users/192', 'pm_score': 5, 'selected': False, 'text': "<pre><code>var element = document.getElementById('element');\nelement.style.background = '#FF00AA';\n</code></pre>\n"}, {'answer_id': 3321, 'author': 'David Wengier', 'author_id': 489, 'author_profile': 'https://Stackoverflow.com/users/489', 'pm_score': 8, 'selected': True, 'text': "<p>In general, CSS properties are converted to JavaScript by making them camelCase without any dashes. So <code>background-color</code> becomes <code>backgroundColor</code>.</p>\n\n<pre><code>function setColor(element, color)\n{\n    element.style.backgroundColor = color;\n}\n\n// where el is the concerned element\nvar el = document.getElementById('elementId');\nsetColor(el, 'green');\n</code></pre>\n"}, {'answer_id': 3361, 'author': 'Wally Lawless', 'author_id': 37, 'author_profile': 'https://Stackoverflow.com/users/37', 'pm_score': 4, 'selected': False, 'text': "<p>Or, using a little jQuery:</p>\n\n<pre><code>$('#fieldID').css('background-color', '#FF6600');\n</code></pre>\n"}, {'answer_id': 16037, 'author': 'Ian Oxley', 'author_id': 1904, 'author_profile': 'https://Stackoverflow.com/users/1904', 'pm_score': 5, 'selected': False, 'text': '<p>You might find your code is more maintainable if you keep all your styles, etc. in CSS and just set / unset class names in JavaScript.</p>\n\n<p>Your CSS would obviously be something like:</p>\n\n<pre class="lang-css prettyprint-override"><code>.highlight {\n    background:#ff00aa;\n}\n</code></pre>\n\n<p>Then in JavaScript:</p>\n\n<pre><code>element.className = element.className === \'highlight\' ? \'\' : \'highlight\';\n</code></pre>\n'}, {'answer_id': 5186696, 'author': 'james.garriss', 'author_id': 584674, 'author_profile': 'https://Stackoverflow.com/users/584674', 'pm_score': 3, 'selected': False, 'text': '<p>Add this script element to your body element:</p>\n\n<pre><code>&lt;body&gt;\n  &lt;script type="text/javascript"&gt;\n     document.body.style.backgroundColor = "#AAAAAA";\n  &lt;/script&gt;\n&lt;/body&gt;\n</code></pre>\n'}, {'answer_id': 15168927, 'author': 'Zardiw', 'author_id': 1723600, 'author_profile': 'https://Stackoverflow.com/users/1723600', 'pm_score': 2, 'selected': False, 'text': "<p>KISS Answer:</p>\n\n<pre><code>document.getElementById('element').style.background = '#DD00DD';\n</code></pre>\n"}, {'answer_id': 20933776, 'author': 'Saeed', 'author_id': 1726377, 'author_profile': 'https://Stackoverflow.com/users/1726377', 'pm_score': 2, 'selected': False, 'text': '<p>You can use:</p>\n<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;\n  Window.body.style.backgroundColor = &quot;#5a5a5a&quot;;\n&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 21683642, 'author': 'bluelog', 'author_id': 3293861, 'author_profile': 'https://Stackoverflow.com/users/3293861', 'pm_score': 2, 'selected': False, 'text': '<p>You can do it with JQuery: </p>\n\n<pre><code>$(".class").css("background","yellow");\n</code></pre>\n'}, {'answer_id': 23002017, 'author': 'hamed', 'author_id': 3521734, 'author_profile': 'https://Stackoverflow.com/users/3521734', 'pm_score': 1, 'selected': False, 'text': "<p>you can use </p>\n\n<pre><code>$('#elementID').css('background-color', '#C0C0C0');\n</code></pre>\n"}, {'answer_id': 29704278, 'author': 'Roger Causto', 'author_id': 4292292, 'author_profile': 'https://Stackoverflow.com/users/4292292', 'pm_score': 3, 'selected': False, 'text': '<p><div class="snippet" data-lang="js" data-hide="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>var element = document.getElementById(\'element\');\r\n\r\nelement.onclick = function() {\r\n  element.classList.add(\'backGroundColor\');\r\n  \r\n  setTimeout(function() {\r\n    element.classList.remove(\'backGroundColor\');\r\n  }, 2000);\r\n};</code></pre>\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.backGroundColor {\r\n    background-color: green;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="element"&gt;Click Me&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 32375473, 'author': 'Ajay Gupta', 'author_id': 2663073, 'author_profile': 'https://Stackoverflow.com/users/2663073', 'pm_score': 3, 'selected': False, 'text': '<p>You can try this</p>\n\n<pre><code>var element = document.getElementById(\'element_id\');\nelement.style.backgroundColor = "color or color_code";\n</code></pre>\n\n<p>Example.</p>\n\n<pre><code>var element = document.getElementById(\'firstname\');\nelement.style.backgroundColor = "green";//Or #ff55ff\n</code></pre>\n\n<p><a href="http://jsfiddle.net/1rjdLno5/6/" rel="nofollow">JSFIDDLE</a></p>\n'}, {'answer_id': 33646923, 'author': 'LemonPie', 'author_id': 1500076, 'author_profile': 'https://Stackoverflow.com/users/1500076', 'pm_score': -1, 'selected': False, 'text': '<pre><code>$(".class")[0].style.background = "blue";\n</code></pre>\n'}, {'answer_id': 42773184, 'author': 'Srikrushna', 'author_id': 5852550, 'author_profile': 'https://Stackoverflow.com/users/5852550', 'pm_score': 2, 'selected': False, 'text': '<pre><code>$("body").css("background","green"); //jQuery\n\ndocument.body.style.backgroundColor = "green"; //javascript\n</code></pre>\n\n<p>so many ways are there I think it is very easy and simple</p>\n\n<p><a href="https://plnkr.co/edit/FEjfjG7SM10ouhvjt4AR?p=preview" rel="nofollow noreferrer">Demo On Plunker</a></p>\n'}, {'answer_id': 44718510, 'author': 'pragadeesh mahendran', 'author_id': 8203775, 'author_profile': 'https://Stackoverflow.com/users/8203775', 'pm_score': 2, 'selected': False, 'text': "<pre><code>$('#ID / .Class').css('background-color', '#FF6600');\n</code></pre>\n\n<p>By using jquery we can target the element's class or Id to apply css background or any other stylings</p>\n"}, {'answer_id': 44718647, 'author': 'Mr.Pandya', 'author_id': 6554624, 'author_profile': 'https://Stackoverflow.com/users/6554624', 'pm_score': 0, 'selected': False, 'text': '<p>Javascript:</p>\n\n<pre><code>document.getElementById("ID").style.background = "colorName"; //JS ID\n\ndocument.getElementsByClassName("ClassName")[0].style.background = "colorName"; //JS Class\n</code></pre>\n\n<p>Jquery:</p>\n\n<pre><code>$(\'#ID/.className\').css("background","colorName") // One style\n\n$(\'#ID/.className\').css({"background":"colorName","color":"colorname"}); //Multiple style\n</code></pre>\n'}, {'answer_id': 50749215, 'author': 'Ivan', 'author_id': 6331369, 'author_profile': 'https://Stackoverflow.com/users/6331369', 'pm_score': 1, 'selected': False, 'text': '<h2>Changing CSS of a <code>HTMLElement</code></h2>\n\n<p>You can change most of the CSS properties with JavaScript, use this statement:</p>\n\n<pre><code>document.querySelector(&lt;selector&gt;).style[&lt;property&gt;] = &lt;new style&gt;\n</code></pre>\n\n<p>where <code>&lt;selector&gt;</code>, <code>&lt;property&gt;</code>, <code>&lt;new style&gt;</code> are all <code>String</code> objects.</p>\n\n<p>Usually, the style property will have the same name as the actual name used in CSS. But whenever there is more that one word, it will be camel case: for example <code>background-color</code> is changed with <code>backgroundColor</code>.</p>\n\n<p>The following statement will set the background of <code>#container</code> to the color red:</p>\n\n<pre><code>documentquerySelector(\'#container\').style.background = \'red\'\n</code></pre>\n\n<p>Here\'s a quick demo changing the color of the box every 0.5s:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>colors = [\'rosybrown\', \'cornflowerblue\', \'pink\', \'lightblue\', \'lemonchiffon\', \'lightgrey\', \'lightcoral\', \'blueviolet\', \'firebrick\', \'fuchsia\', \'lightgreen\', \'red\', \'purple\', \'cyan\']\r\n\r\nlet i = 0\r\nsetInterval(() =&gt; {\r\n  const random = Math.floor(Math.random()*colors.length)\r\n  document.querySelector(\'.box\').style.background = colors[random];\r\n}, 500)</code></pre>\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {\r\n  width: 100px;\r\n  height: 100px;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<h2>Changing CSS of multiple <code>HTMLElement</code></h2>\n\n<p>Imagine you would like to apply CSS styles to more than one element, for example, make the background color of all elements with the class name <code>box</code> <code>lightgreen</code>. Then you can:</p>\n\n<ol>\n<li><p>select the elements with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector" rel="nofollow noreferrer"><code>.querySelectorAll</code></a> and unwrap them in an object <code>Array</code> with the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" rel="nofollow noreferrer">destructuring syntax</a>:</p>\n\n<pre><code>const elements = [...document.querySelectorAll(\'.box\')]\n</code></pre></li>\n<li><p>loop over the array with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" rel="nofollow noreferrer"><code>.forEach</code></a> and apply the change to each element:</p>\n\n<pre><code>elements.forEach(element =&gt; element.style.background = \'lightgreen\')\n</code></pre></li>\n</ol>\n\n<p>Here is the demo:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>const elements = [...document.querySelectorAll(\'.box\')]\r\nelements.forEach(element =&gt; element.style.background = \'lightgreen\')</code></pre>\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {\r\n  height: 100px;\r\n  width: 100px;\r\n  display: inline-block;\r\n  margin: 10px;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;&lt;/div&gt;\r\n&lt;div class="box"&gt;&lt;/div&gt;\r\n&lt;div class="box"&gt;&lt;/div&gt;\r\n&lt;div class="box"&gt;&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<h2>Another method</h2>\n\n<p>If you want to change multiple style properties of an element more than once you may consider using another method: link this element to another class instead.</p>\n\n<p>Assuming you can prepare the styles beforehand in CSS you can toggle classes by accessing the <code>classList</code> of the element and calling the <code>toggle</code> function:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector(\'.box\').classList.toggle(\'orange\')</code></pre>\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {\r\n  width: 100px;\r\n  height: 100px;\r\n}\r\n\r\n.orange {\r\n  background: orange;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=\'box\'&gt;&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<h2>List of CSS properties in JavaScript</h2>\n\n<p>Here is the complete list:</p>\n\n<pre><code>alignContent\nalignItems\nalignSelf\nanimation\nanimationDelay\nanimationDirection\nanimationDuration\nanimationFillMode\nanimationIterationCount\nanimationName\nanimationTimingFunction\nanimationPlayState\nbackground\nbackgroundAttachment\nbackgroundColor\nbackgroundImage\nbackgroundPosition\nbackgroundRepeat\nbackgroundClip\nbackgroundOrigin\nbackgroundSize&lt;/a&gt;&lt;/td&gt;\nbackfaceVisibility\nborderBottom\nborderBottomColor\nborderBottomLeftRadius\nborderBottomRightRadius\nborderBottomStyle\nborderBottomWidth\nborderCollapse\nborderColor\nborderImage\nborderImageOutset\nborderImageRepeat\nborderImageSlice\nborderImageSource  \nborderImageWidth\nborderLeft\nborderLeftColor\nborderLeftStyle\nborderLeftWidth\nborderRadius\nborderRight\nborderRightColor\nborderRightStyle\nborderRightWidth\nborderSpacing\nborderStyle\nborderTop\nborderTopColor\nborderTopLeftRadius\nborderTopRightRadius\nborderTopStyle\nborderTopWidth\nborderWidth\nbottom\nboxShadow\nboxSizing\ncaptionSide\nclear\nclip\ncolor\ncolumnCount\ncolumnFill\ncolumnGap\ncolumnRule\ncolumnRuleColor\ncolumnRuleStyle\ncolumnRuleWidth\ncolumns\ncolumnSpan\ncolumnWidth\ncounterIncrement\ncounterReset\ncursor\ndirection\ndisplay\nemptyCells\nfilter\nflex\nflexBasis\nflexDirection\nflexFlow\nflexGrow\nflexShrink\nflexWrap\ncontent\nfontStretch\nhangingPunctuation\nheight\nhyphens\nicon\nimageOrientation\nnavDown\nnavIndex\nnavLeft\nnavRight\nnavUp&gt;\ncssFloat\nfont\nfontFamily\nfontSize\nfontStyle\nfontVariant\nfontWeight\nfontSizeAdjust\njustifyContent\nleft\nletterSpacing\nlineHeight\nlistStyle\nlistStyleImage\nlistStylePosition\nlistStyleType\nmargin\nmarginBottom\nmarginLeft\nmarginRight\nmarginTop\nmaxHeight\nmaxWidth\nminHeight\nminWidth\nopacity\norder\norphans\noutline\noutlineColor\noutlineOffset\noutlineStyle\noutlineWidth\noverflow\noverflowX\noverflowY\npadding\npaddingBottom\npaddingLeft\npaddingRight\npaddingTop\npageBreakAfter\npageBreakBefore\npageBreakInside\nperspective\nperspectiveOrigin\nposition\nquotes\nresize\nright\ntableLayout\ntabSize\ntextAlign\ntextAlignLast\ntextDecoration\ntextDecorationColor\ntextDecorationLine\ntextDecorationStyle\ntextIndent\ntextOverflow\ntextShadow\ntextTransform\ntextJustify\ntop\ntransform\ntransformOrigin\ntransformStyle\ntransition\ntransitionProperty\ntransitionDuration\ntransitionTimingFunction\ntransitionDelay\nunicodeBidi\nuserSelect\nverticalAlign\nvisibility\nvoiceBalance\nvoiceDuration\nvoicePitch\nvoicePitchRange\nvoiceRate\nvoiceStress\nvoiceVolume\nwhiteSpace\nwidth\nwordBreak\nwordSpacing\nwordWrap\nwidows\nwritingMode\nzIndex\n</code></pre>\n'}, {'answer_id': 59819524, 'author': 'Mehadi Hassan', 'author_id': 9569557, 'author_profile': 'https://Stackoverflow.com/users/9569557', 'pm_score': 0, 'selected': False, 'text': '<p>A simple js can solve this:</p>\n\n<pre><code>document.getElementById("idName").style.background = "blue";\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/3319', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/383/']