選擇表單的JavaScript更改類

我需要一個選擇表單來更改div元素的類。從下面的示例代碼中，我如何使用JavaScript根據選擇更改div（myBox）的類。選擇表單的JavaScript更改類

<html> 
    <head> 
    <style type="text/css"> 
    .red {background:#FF0000;color:#FFF} 
    .white {background:#FFF;color:#000} 
    .blue {background:#0000FF;color:#FFF} 
    </style> 
    </head> 

    <body> 
    <form id="myform" action="#"> 
    <select id="bgcolor"> 
     <option value="red">Red</option> 
     <option value="white">White</option> 
     <option value="blue">Blue</option> 
    </select> 
    </form> 

    <div id="myBox" class="red">This is myBox</div> 

    </body> 
    </html>

來源

2012-02-23 Dallas Moore

而問題是什麼？ – Candide 2012-02-23 00:12:08

那裏有一個問題，但我想也許@Ingenu的意思是[你有什麼已經嘗試過？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/）（As它現在站立，你似乎並沒有要求幫助一個問題，而是要求我們爲你實現整個事情。） – nnnnnn 2012-02-23 00:14:32

處理的onchange事件select element和改變div的class：

document.getElementById('bgcolor').onchange = function(){ 
    document.getElementById('myBox').className = this.value; 
};

來源

2012-02-23 00:12:52 xandercoded

謝謝Xander！這工作完美！ – 2012-02-23 01:10:34

更簡單，也許更明顯作爲'document.getElementById（'myBox'）。className = this.value;'。在IE瀏覽器中使用鍵選擇選項將產生有趣的結果。 :-) – RobG 2012-02-23 02:06:08

選擇表單的JavaScript更改類

回答

相關問題