如何使用javascript通过下拉菜单更改背景_Javascript

如何使用javascript通过下拉菜单更改背景

javascript

如何使用javascript通过下拉菜单更改背景,javascript,Javascript,嗨，我现在不太擅长JavaScript，我遇到了一个问题。我正在制作一个网站来展示我能做什么，在我将展示布局的部分，我希望有一些选项，这样他们可以改变页面的颜色，看看它是什么样子。现在我已经用单选按钮完成了，效果很好，但我想把它放到下拉列表中，让它看起来更好带有单选按钮的代码： <form action=""> <input onclick="change_color_body_blue()" type="radio" name="Content_body_c

嗨，我现在不太擅长JavaScript，我遇到了一个问题。我正在制作一个网站来展示我能做什么，在我将展示布局的部分，我希望有一些选项，这样他们可以改变页面的颜色，看看它是什么样子。现在我已经用单选按钮完成了，效果很好，但我想把它放到下拉列表中，让它看起来更好

带有单选按钮的代码：

<form action="">
        <input onclick="change_color_body_blue()" type="radio" name="Content_body_color"/>Blue
        <input onclick="change_color_body_green()" type="radio" name="Content_body_color"/>Green
        <input onclick="change_color_body_red()" type="radio" name="Content_body_color"/>Red
        <input onclick="change_color_body_yellow()" type="radio" name="Content_body_color"/>Yellow
        <input onclick="change_color_body_orange()" type="radio" name="Content_body_color"/>Orange
        <input onclick="change_color_body_purple()" type="radio" name="Content_body_color"/>Purple
        <input onclick="change_color_body_brown()" type="radio" name="Content_body_color"/>Brown
        <input onclick="change_color_body_cream()" type="radio" name="Content_body_color"/>Cream
        <input onclick="change_color_body_pink()" type="radio" name="Content_body_color"/>Pink
        <input onclick="change_color_body_hotpink  ()" type="radio" name="Content_body_color"/>HotPink
        <input onclick="change_color_body_black()" type="radio" name="Content_body_color"/>Black
        <input onclick="change_color_body_white()" type="radio" name="Content_body_color"/>White
    </form>


蓝色
绿色
红色
黄的
橙色
紫色
棕色的
奶油
粉红色
热粉色
黑色
白色

现在查看带有下拉列表的代码

        <form action="">
    <select>
        <option onchange="change_color_body_blue()" name="Content_body_color">Blue</option>
        <option onchange="change_color_body_green()" name="Content_body_color">Green</option>
        <option onchange="change_color_body_red()" name="Content_body_color">Red</option>
        <option onchange="change_color_body_yellow()" name="Content_body_color">Yellow</option>
        <option onchange="change_color_body_orange()" name="Content_body_color">Orange</option>
        <option onchange="change_color_body_purple()" name="Content_body_color">Purple</option>
        <option onchange="change_color_body_brown()" name="Content_body_color">Brown</option>
        <option onchange="change_color_body_cream()" name="Content_body_color">Cream</option>
        <option onchange="change_color_body_pink()" name="Content_body_color">Pink</option>
        <option onchange="change_color_body_hotpink  ()" name="Content_body_color">HotPink</option>
        <option onchange="change_color_body_black()" name="Content_body_color">Black</option>
        <option onchange="change_color_body_white()" name="Content_body_color">White</option>
    </select>
    </form>


蓝色
绿色
红色
黄的
橙色
紫色
棕色的
奶油
粉红色
热粉色
黑色
白色

我尝试了onchange onclick和onselect，但没有效果我还向select标签添加了一个事件。该功能有效，但它只会变为1种颜色，因为只能输入我的1个功能。有人能找到解决方法吗？

这应该有效

<html>
<head>
</head>
<body>
 <select onchange="javascript:changeColor(this);">
        <option>Blue</option>
        <option>Green</option>
        <option>Red</option>
        <option>Yellow</option>
        <option>Orange</option>
        <option>Purple</option>
        <option>Brown</option>
        <option>Cream</option>
        <option>Pink</option>
        <option>HotPink</option>
        <option>Black</option>
        <option>White</option>
    </select>
<script>
function changeColor(el) {
    var color = el.value;
    document.body.style.background = color;
}
</script>
</body>
</html>


蓝色
绿色
红色
黄的
橙色
紫色
棕色的
奶油
粉红色
热粉色
黑色
白色
功能更改颜色（el）{
var color=el.value；
document.body.style.background=颜色；
}

感谢您的帮助！！我想问一下el代表什么，为什么“this”需要在“changeColor（this）”中，我只是想了解我在做什么：Dok（this）表示当前正在使用的对象，它是对HTMLDOM元素的引用。“el”只是一个参数名，它接收函数传递的“this”。谢谢，我现在理解了，你刚刚为我节省了很多编码，我昨天花了一整天的时间来做body divs边框的单选按钮，等等，但是这种方式更快，eiser:D