1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>下拉菜单</title>
6 <style type="text/css">
7 .clrclass{
8 height:50px;
9 width:50px;
10 float:left;
11 margin-right:30px;
12 }
13 #text{
14 clear:left;
15 margin-top:50px;
16 }
17 </style>
18 </head>
19
20 <body>
21
22 <!---->
23 <script type="text/javascript">
24 function changeColor(node){
25 var colorVal = node.style.backgroundColor;
26
27 document.getElementById("text").style.color = colorVal;
28 }
29 </script>
30
31 <div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
32 <div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
33 <div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
34 <div id="text">
35 曝热火欲招揽安东尼组四巨头<br/>
36 总决赛G4前瞻：斯波调整成比赛关键<br/>
37 骑士考察新秀恩比德 若背伤无碍就选他<br/>
38 </div>
39
40 <hr/>
41
42 <script type="text/javascript">
43 function changeColor2(node){
44
45 var oSelectNode = document.getElementsByName("selectColor")[0];
46
47 //获取所有的option
48 var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;
49
50 document.getElementById("text").style.color =colorVal;
51
52 }
53 </script>
54 <select name="selectColor" onchange="changeColor2(this)">
55 <option value="black">--选择颜色--</option>
56 <option value="red">红色</option>
57 <option value="green">绿色</option>
58 <option value="blue">蓝色</option>
59 </select>
60 <select name="selectColor2" onchange="changeColor2(this)" class="selClass">
61 <option style="background-color:black" value="black">--选择颜色--</option>
62 <option style="background-color:red" value="red">红色</option>
63 <option style="background-color:green" value="green">绿色</option>
64 <option style="background-color:blue" value="blue">蓝色</option>
65 </select>
66 </body>
67 </html>
时间： 2024-10-16 13:41:11