朋友们,好久不见,有一段时间没更新博客了,这几天的时间就把我这段时间所学的东西与大家分享分享,希望你们能给与意见!
我先还是从基础的说起吧,下面来说一个简单的例子,就是如何通过选择下拉框中的颜色更改一个div的背景颜色:
首先我们先把这个下拉框创建出来:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <select id = "s" onchange="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层的背景颜色即可。详细代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>