选择一个选项来更改页面的背景颜色
[英]Select an option to change a page's background color
问题描述
我想选择一个选项以使用 JavaScript 更改页面的背景颜色。
这是我尝试过的：
<html>
<head>
<script>
function colorFunction()
{
document.bgcolor="this.option[this.selectedIndex]";
}
</script>
</head>
<body>
<form name="bgcolor form">try it now:
<select onchanage="colorFunction">
<option value="choose">Set Background color
<option value="FFOOOO">Dark Red
<option value="OOFFOO">Dark Green
<option value="OOOOFF">Dark Blue
<option value="OOOOOO">Black
</select>
</form>
</body>
</html>
但是，我的代码不起作用（我不知道错误是什么）。
5 个解决方案
解决方案1
1
只需使用 jquery 即可完成。
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("#dropdown").change(function() { var color = $("#dropdown").val(); // alert(color); $("body").css("background-color", color); }); }); </script> </head> <body> <form name="bgcolor form">try it now: <select id="dropdown"> <option value="#fff">Set Background color <option value="#ff0000">Dark Red <option value="#006600">Dark Green <option value="#0000ff">Dark Blue <option value="#000000">Black </select> </form> </body> </html>
解决方案2
1
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("#dropdown").change(function() { var color = $("#dropdown").val(); // alert(color); $("body").css("background-color", color); }); }); </script> </head> <body> <form name="bgcolor form">try it now: <select id="dropdown"> <option value="#fff">Set Background color <option value="#ff0000">Dark Red <option value="#006600">Dark Green <option value="#0000ff">Dark Blue <option value="#000000">Black </select> </form> </body> </html>
解决方案3
0 2015-12-24 10:56:19
我想，这就是你想要的。
<html> <head> <script> function colorFunction(color) { document.body.style.backgroundColor = color; } </script> </head> <body> <form name="bgcolor form">try it now: <select onchange="colorFunction(this.value)"> <option value="#fff">Set Background color <option value="#ff0000">Dark Red <option value="#006600">Dark Green <option value="#0000ff">Dark Blue <option value="#000000">Black </select> </form> </body> </html>
解决方案4
0 2015-12-24 11:09:03
在这里我修改了你的代码，请检查它。 我已经按照你想要的方式完成了。
<html> <head> <script> function colorFunction() { var color = document.getElementById("thedropdown"); document.body.style.backgroundColor = color.options[color.selectedIndex].value; } </script> </head> <body> <form name="bgcolor form">try it now: <select id="thedropdown" onchange="colorFunction()"> <option value="#fff">Set Background color <option value="#ff0000">Dark Red <option value="#006600">Dark Green <option value="#0000ff">Dark Blue <option value="#000000">Black </select> </form> </body> </html>
解决方案5
-2 2015-11-27 15:09:13
你有一个错字。 它应该是：
<select onchange="colorFunction">
这是我的解决方案：
function colorFunction(e) { if(e.selectedIndex!=0) { document.bgColor = e.options[e.selectedIndex].value } }
<form name="bgcolor form">Try it now: <select onChange="colorFunction(this)"> <option value="choose">set background color <option value="FFFFCC">light yellow <option value="CCFFFF">light blue <option value="CCFFCC">light green <option value="CCCCCC">gray <option value="FFFFFF">white </select> </form>
Javascript使用范围滑块在选择选项中更改背景颜色
[英]Javascript change background color in select option with range slider
选择任何选项后如何更改选择菜单的背景颜色| 不是选项颜色
[英]How to change select menu background color after selected any option| not option color
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.