- Back to Home »
- JavaScript »
- Javascript Part-5 changing background color style property using js code
Posted by :
Sudhir Chekuri
Sunday, 27 October 2013
Javascript code to change the background color style of div tag based on the color selected from dropdown by the user
<html>
<head>
<script>
function f1()
{
var x= document.getElementById('colorpicker').value;
document.getElementById('colormsg').style.background= x;
}
</script>
</head>
<body>
<div id='colormsg' font-size="100px";width="100";height="180";padding="5px">choose a background color</div>
<select id='colorpicker' onclick='f1()'/>
<option value="transparent">None</option>
<option value="Yellow">yellow</option>
<option value="Cyan">cyan</option>
<option value="pink">Pink</option>
</body>
</html>
<html>
<head>
<script>
function f1()
{
var x= document.getElementById('colorpicker').value;
document.getElementById('colormsg').style.background= x;
}
</script>
</head>
<body>
<div id='colormsg' font-size="100px";width="100";height="180";padding="5px">choose a background color</div>
<select id='colorpicker' onclick='f1()'/>
<option value="transparent">None</option>
<option value="Yellow">yellow</option>
<option value="Cyan">cyan</option>
<option value="pink">Pink</option>
</body>
</html>