Question

我想选择一个选项，以便使用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>

但是，我的代码不起作用（我不知道错误是什么）。

Answer 1

只需使用jquery即可。

＆＃13;

<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>

＆＃13;

Answer 2

<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>

Answer 3

我想，这就是你想要的。

<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>

Answer 4

我在这里修改了你的代码，请检查一下。我已经按照你想要的方式完成了它。

<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>

Answer 5

你有一个错字。它应该是：

<select onchange="colorFunction">

这是我的解决方案：

＆＃13;

function colorFunction(e) {
	if(e.selectedIndex!=0) {
    	document.bgColor = e.options[e.selectedIndex].value
  	}
}

＆＃13;

<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>

＆＃13;

选择一个选项以更改页面的背景颜色

5 个答案: