06-01-2011, 04:45 AM
Javascript Change Background Color Style
<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> <input type="button" value="click here" onclick="changeBackgroundColor('div1')" /> </center></body></html>
<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> <input type="button" value="click here" onclick="changeBackgroundColor('div1')" /> </center></body></html>