JS案例练习 — 给div添加样式选择功能

 1 <style>
 2     *{margin:0; padding:0px}
 3     li{list-style:none}
 4     body{font:24px ‘Microsoft YaHei‘; color:black}
 5     .div0{padding:20px 50px; font-weight: bold;}
 6     .div1{margin-bottom: 20px;}
 7     .div1 span{font-weight: normal;font-size: 16px; background: red; color: white; padding: 10px;}
 8     #div2{width:100px; height:100px; border: 4px solid black;background: white;}
 9     .div3{width:300px; height:200px; border:20px solid darkgrey; padding: 20px; right:80px; bottom:50px;
10         position: absolute;display:none; }
11     .div3 ul li{font-size: 18px; font-weight:normal;height: 50px; }
12     #red{background: crimson; color:white; font-size: 14px; padding: 6px 10px; margin-right: 10px; margin-left: 10px;cursor:pointer;}
13     #yellow{background: darkorange; color:white; font-size: 14px; padding: 6px 10px; margin-right: 10px;margin-left: 10px;cursor:pointer;}
14     #blue{background:cornflowerblue; color:white; font-size: 14px; padding: 6px 10px;margin-left: 10px;cursor:pointer; }
15     #red:hover{background: red;}
16     #yellow:hover{background: orangered;}
17     #blue:hover{background:blue;}
18     #w200,#h200{border: 1px solid darkgrey;font-size: 14px; padding: 6px 5px;margin-left: 10px;margin-right: 8px; background: lightgray ;cursor:pointer;}
19     #w300,#h300{border: 1px solid darkgrey;font-size: 14px; padding: 6px 5px;margin-left: 10px;margin-right: 8px; background: lightgray ;cursor:pointer;}
20     #w400,#h400{border: 1px solid darkgrey;font-size: 14px; padding: 6px 5px;margin-left: 10px; background: lightgray;cursor:pointer;}
21     #w200:hover,#h200:hover{border: 1px solid dimgray; background: forestgreen; color: white}
22     #w300:hover,#h300:hover{border: 1px solid dimgray; background: forestgreen; color: white}
23     #w400:hover,#h400:hover{border: 1px solid dimgray; background: forestgreen; color: white}
24     #blueC{background: blue;padding: 5px 15px; color:white; font-size: 14px; cursor:pointer;}
25     #blueS{background: blue;padding: 5px 15px; color:white; font-size: 14px; cursor:pointer;}
26     .last{text-align: center; margin-top: 10px}
27     #click{cursor: pointer;}
28 </style>

 1 <script>
 2     window.onload = function(){
 3         //点击设置
 4         var oCli = $(‘click‘);
 5         oCli.onclick = set;
 6         //获取div2的ID
 7         var oDiv2 = $(‘div2‘);
 8         //获取div3的ID
 9         var oDiv3 = $(‘div3‘);
10         //获取背景ID
11         var oRed = $(‘red‘);
12         var oYellow = $(‘yellow‘);
13         var oBlue = $(‘blue‘);
14         //设置背景
15         oRed.onclick = backGroundRed;
16         oYellow.onclick = backGroundYellow;
17         oBlue.onclick = backGroundBlue;
18         //获取宽度ID
19         var oW200 = $(‘w200‘);
20         var oW300 = $(‘w300‘);
21         var oW400 = $(‘w400‘);
22         //设置宽度
23         oW200.onclick = width200;
24         oW300.onclick = width300;
25         oW400.onclick = width400;
26         //获取高度ID
27         var oH200 = $(‘h200‘);
28         var oH300 = $(‘h300‘);
29         var oH400 = $(‘h400‘);
30         //设置高度
31         oH200.onclick = height200;
32         oH300.onclick = height300;
33         oH400.onclick = height400;
34         //获取确认和取消ID
35         var oSure = $(‘blueS‘);
36         oSure.onclick = close;
37         var oCancle = $(‘blueC‘);
38         oCancle.onclick = recover;
39 
40         //div3展出效果
41         function set(){
42              oDiv3.style.display = ‘block‘;
43         }
44         //div3关闭
45         function close(){
46             oDiv3.style.display = ‘none‘;
47         }
48         //恢复默认设置
49         function recover(){
50             oDiv3.style.display = ‘none‘;
51             oDiv2.style.background =‘white‘;
52             oDiv2.style.width = ‘100px‘;
53             oDiv2.style.height = ‘100px‘;
54             oDiv2.style.border = ‘4px solid black‘;
55         }
56         //设置背景
57         function backGroundRed(){
58             oDiv2.style.background = ‘red‘;
59         }
60         function backGroundYellow(){
61             oDiv2.style.background = ‘orange‘;
62         }
63         function backGroundBlue(){
64             oDiv2.style.background = ‘blue‘;
65         }
66         //设置宽度
67         function width200(){
68             oDiv2.style.width = ‘200px‘;
69         }
70         function width300(){
71             oDiv2.style.width = ‘300px‘;
72         }
73         function width400(){
74             oDiv2.style.width = ‘400px‘;
75         }
76         //设置高度
77         function height200(){
78             oDiv2.style.height = ‘200px‘;
79         }
80         function height300(){
81             oDiv2.style.height = ‘300px‘;
82         }
83         function height400(){
84             oDiv2.style.height = ‘400px‘;
85         }
86 
87         //通用ID调取
88         function $(id){
89             return document.getElementById(id);
90         }
91     }
92 </script>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>设定样式功能</title>
 6 </head>
 7 <body>
 8 <div class="div0">
 9     <div class="div1">
10         请为下面的DIV设置样式：<span id="click">点击设置</span>
11     </div>
12     <div id="div2"></div>
13     <div class="div3" id="div3">
14         <ul>
15             <li>请选择背景色：<span id="red">红</span><span id="yellow">黄</span><span id="blue">蓝</span></li>
16             <li>请选择宽(px)：<span id="w200">200</span><span id="w300">300</span><span id="w400">400</span></li>
17             <li>请选择高(px)：<span id="h200">200</span><span id="h300">300</span><span id="h400">400</span></li>
18             <li class="last"><span id="blueC">恢复</span> <span id="blueS">确认</span></li>
19         </ul>
20     </div>
21 </div>
22 </body>
23 </html>