在下拉框中选择一个颜色，如何更改div的背景颜色

　　朋友们，好久不见，有一段时间没更新博客了，这几天的时间就把我这段时间所学的东西与大家分享分享，希望你们能给与意见！

　　我先还是从基础的说起吧，下面来说一个简单的例子，就是如何通过选择下拉框中的颜色更改一个div的背景颜色：

首先我们先把这个下拉框创建出来：

View Code

 1 <select id = "s" οnchange="ChangeColor()">
 2         <option selected = "selected">-------请选择------</option>
 3         <option value="yellow">黄色</option>
 4         <option value="green">绿色</option>
 5         <option value="blue">蓝色</option>
 6         <option value="pink">粉红色</option>
 7         <option value="red">红色</option>
 8         <option value="gray">灰色</option>
 9         <option value="orange">橘黄色</option>
10 
11     </select>

之后我们创建一个div层:

<div id = "d"></div>

之后可以通过超链接更改这个div的背景颜色

<a href = "javascript:ChangeColor()"></a>

然后我们就需要创建函数ChangeColor(),首先需要先拿到div这个对象，可以通过dom.getElementById()这个方法，之后考虑如何获得下拉框中选中的值，然后把其值赋值给div层的背景颜色即可。详细代码如下：

View Code

 1 <script type="text/javascript">
 2     function ChangeColor(){
 3         var dd = document.getElementById("d");
 4         var ss = document.getElementById("s");
 5         dd.style.backgroundColor = ss.value;
 6     }
 7 </script>
 8 <style type="text/css">
 9 #d{
10     width:400px;
11     height:300px;
12     border:1px solid #000;
13 }
14 </style>

 

转载于:https://www.cnblogs.com/lina128zxf/archive/2012/10/24/2737692.html