首页 > 代码库 > 示例-下拉菜单-选择颜色

示例-下拉菜单-选择颜色

2024-07-08 00:26:18   225人阅读

 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>
View Code

 


联系
我们