changing color by javascript function
Question
In the following code, I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Changing Color</title>
<head>
<style type="text/css">
body {
background-color:#ffcccc;
}
</style>
</head>
<body>
<form>
<label>color: <input type="text" name="color"> </label>
<input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
</form>
</body>
</html>
Javascript:
function changecolor(colour)
{
document.bgcolor=colour;
}
3 answers
solution1
2 2011-06-04 06:48:29
Assuming colour contains a valid CSS color descriptor, you can write:
document.body.style.backgroundColor = colour;
solution2
0 2011-06-04 07:14:16
you have to put the function in a script block.
...
</form>
<script type="text/javascript>
//function declaration
</script>
solution3
0 2011-06-04 07:46:17
Try this code it works finely man.i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.
<html>
<head>
<script language="javaScript">
function change_background(color){
document.bgColor = color;
}
</script>
</head>
<body>
<form>
<label>color: <input type="text" name="color" >
</label>
<input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " >
</form>
<a href="#" onClick="change_background('#099')">ClickBlue</a>
<a href="#" onMouseOver="change_background('#111')">Mouseoverblack</a>
<a href="#" onMouseOver="change_background('#fff')">Mouseover white</a>
</body>
</html>`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.