Javascript Change Background Color Style

Updated on 23 Mar 2012,
Published on 25 Jun 2008

Javascript DOM style object provides the backgroundColor property of CSS styles to change the background color of HTML tags. You can use the Javascript function to change the background color style of any HTML element that has some width and height so that it could reflect the change in color of its background. Javascript style object consists of all the CSS properties that can be accessed using Javascript DOM method. You can access the HTML document Elements using Javascript document object’s methods such as document.getElementById or document.getElementByName. By passing the Id or Name of the HTML element to these Javascript methods you can use the style object along with CSS property name to change the background color of that particular HTML element or tag.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

Syntax of Javascript style object to change Background Color

document.getElementById("HTML element id"). style. backgroundColor = "value";

Javascript style object name and CSS property name are case sensitive. Use the same pattern as it is used in the above syntax.

Example of Javascript Change Background Color Style

<html>
<head>
    <title>Javascript Change Background Color Style</title>
    
    <script language="javascript" type="text/javascript">
    <![CDATA[
        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>

        <input type="button" 
                value="click here" 
                onclick="changeBackgroundColor('div1')" /> 
    </center>

</body>
</html>

Output:

You can see the output of above discussed codes from the following link:

Change Div Background Color Style

Continue to next tutorial: Javascript Change Div Background Image onclick to learn how to change the background image of HTML div element dynamically.

2 Responses to "Javascript Change Background Color Style"
nice sharing,please update some html5 supported js
vandana
gud tutorial ... pls posting gud tutorials
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email