选择表单的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更改类

回答

相关问题