Change Div Background Color Style

JavaScript Change background-color style functionality can be created by using JavaScript DOM style properties. In this sample backgroundColor property of style object of JavaScript DOM has been used to change the background color of the HTML element.

JavaScript Dom Features Used

1. document object

2. getElementsById method

3. style object

4. BackgroundColor property

Try the sample below to learn and practice the JavaScript DOM code for developing this functionality:

Edit this code and click update to view output

<html>
<head>
    <title>Javascript Change Background Color Style</title>
    
    <script language="javascript" type="text/javascript">
        function changeBackgroundColor(objDivID)
        {
            var backColor = new String();

backColor = document.getElementById(objDivID).style.backgroundColor;
            
            // IE works with hex code of color e.g.: #eeeeee
            // Firefox works with rgb color code e.g.: rgb(238, 238, 238)
            // Thats why both types are used in If-condition below
            if(backColor.toLowerCase()=='#eeeeee' || backColor.toLowerCase()=='rgb(238, 238, 238)')
            {
                document.getElementById(objDivID).style.backgroundColor = '#c0c0c0';
            }
            else
            {
                document.getElementById(objDivID).style.backgroundColor = '#eeeeee';
            }
        }
    </script>

</head>
<body>

<center>
        <div id="div1" style="background-color : #EEEEEE; width: 200px; height: 100px">
            Javascript will change the background color of this Div tag dynamically.
        </div>

</body>
</html>

OUTPUT:

Get Code for this sample...

Previous Sample

Next Sample