How to Change the Background Color of Div in JavaScript?

JavaScript – Change the Background Color of Div

To change the background color of a div using JavaScript, get reference to the element, and assign required color value to the element.style.backgroundColor property.

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
</span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln"> 
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;h2&gt;</span><span class="pln">Change Background Color of Div in JavaScript</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">This is a paragraph in Div.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
        </span><span class="tag">&lt;span&gt;</span><span class="pln">This is a span in Div.</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;br&gt;</span><span class="pln">
    </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">changeStyle</span><span class="pun">()</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Click Me</span><span class="tag">&lt;/button&gt;</span><span class="pln">

    </span><span class="tag">&lt;script&gt;</span><span class="pln">
    </span><span class="kwd">function</span><span class="pln"> changeStyle</span><span class="pun">(){</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> element </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"myDiv"</span><span class="pun">);</span><span class="pln">
        element</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">backgroundColor </span><span class="pun">=</span><span class="pln"> </span><span class="str">"#00FF00"</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span>