如何使用javascript更改背景，使用下拉菜單

嗨即時通訊目前不是很棒的JavaScript和我遇到了問題。即時通訊製作一個網站炫耀我可以做什麼，並在我將顯示佈局我想要的選項，使他們可以改變頁面的顏色，看看它看起來像。現在我已經完成了這個使用單選按鈕，它很好，但我想把它放到一個下拉，使其看起來更好。如何使用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>

我已經平變化的onclick和ONSELECT嘗試，但沒有工作的代碼我也開始加入的事件之一這個選擇標籤可以工作，但它只會變成1種顏色，因爲只有我的一個功能可以輸入任何人都可以看到解決方法？

來源

2014-01-16 Website_Crazy

這應該工作。

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

來源

2014-01-16 10:16:56 cardeol

感謝您的幫助，這工作！我可以問，什麼埃爾代表，爲什麼「這個」需要在「changeColor（this）」我只是想了解即時通訊做什麼：D –

好（這）意味着當前使用的對象，它是一個引用html DOM元素。「el」只是接收函數傳遞的「this」的參數名稱。 – cardeol

謝謝，我現在明白了，你剛剛爲我節省了很多編碼，我昨天花了整整一天的時間做單元格邊框的單選按鈕，等等，但這種方式更快更快捷：D –

如何使用javascript更改背景，使用下拉菜單

回答

相關問題