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

　　附加效果图：

　　

　　CSS内容：

　　

 <style>
     *{margin:; padding:0px}
     li{list-style:none}
     body{font:24px 'Microsoft YaHei'; color:black;background: darkgray;}
     .last{text-align: center; margin: 0px!important; padding: 5px 0 20px 0px;}
     .div0{width: 500px;height: 500px;border: 1px solid gray;background: lightgray; margin: 30px auto;text-align: center;
         vertical-align: middle; display: table-cell; }
     .div1{margin: 20px auto; width: 500px; }
     .div1 h2{background: olivedrab; font-size: 20px; text-align: center;line-height: 30px; color: white; font-weight: normal; line-height: 50px;}
     .div1 h2:hover{background:green;}
     .div1 span{font-weight: normal;font-size: 16px; background: red; color: white; padding: 10px;}
     #div2{width:100px; height:100px; border: 1px solid gray;background: lawngreen; margin: 0 auto;display: inline-block;border-radius: 5px;}
     .div3 {border: 1px solid dimgray; padding:0 15px;background: white;display: none;position: absolute;
         vertical-align: middle;top: 50%;left: 50%;margin-top: -302px;margin-left: 250px;font-size: 16px;}
     .div3 ul li{font-size: 15px; font-weight:normal;  margin: 15px 0 25px 0;}
     #red{background: crimson; color:white; font-size: 14px; padding: 6px 10px; margin-right: 10px;cursor:pointer; border-radius:3px;}
     #yellow{background: darkorange; color:white; font-size: 14px; padding: 6px 10px; margin-right: 10px;cursor:pointer;border-radius:3px;}
     #blue{background:cornflowerblue; color:white; font-size: 14px; padding: 6px 10px;cursor:pointer; border-radius:3px;}
     #red:hover{background: red;}
     #yellow:hover{background: orangered;}
     #blue:hover{background:blue;}
     #w200,#h200,#w300,#h300,#w400,#h400{border: 1px solid darkgrey;font-size: 14px; padding: 6px 4px;margin-right: 8px; background:gainsboro ;cursor:pointer;border-radius:3px;}
     #w200:hover,#h200:hover,#w300:hover,#h300:hover,#w400:hover,#h400:hover{border: 1px solid dimgray; background: forestgreen; color: white}
     #blueC,#blueS{background:#444444;padding: 5px 12px; color:white; font-size: 14px; cursor:pointer;margin-right: 5px;border-radius:4px;}
     #blueC:hover,#blueS:hover{background:#222222;}
     #click{cursor: pointer;}
 </style>

　　JS内容：

　　

 <script>
     window.onload = function(){
         //获取设置ID
         var oCli = $('click');
         //获取div2的ID
         var oDiv2 = $('div2');
         //获取div3的ID
         var oDiv3 = $('div3');
         //div3展出效果
         oCli.onclick = function(){
             oDiv3.style.display = 'block';
         }
         //获取背景ID
         var oRed = $('red');
         var oYellow = $('yellow');
         var oBlue = $('blue');
         //设置背景
         oRed.onclick = function(){
             oDiv2.style.background = 'red';
         }
         oYellow.onclick = function(){
             oDiv2.style.background = 'orange';
         }
         oBlue.onclick = function(){
             oDiv2.style.background = 'blue';
         }
         //获取宽度ID
         var oW200 = $('w200');
         var oW300 = $('w300');
         var oW400 = $('w400');
         //设置宽度
         oW200.onclick = function(){
             oDiv2.style.width = '200px';
         }
         oW300.onclick = function(){
             oDiv2.style.width = '300px';
         }
         oW400.onclick = function(){
             oDiv2.style.width = '400px';
         }
         //获取高度ID
         var oH200 = $('h200');
         var oH300 = $('h300');
         var oH400 = $('h400');
         //设置高度
         oH200.onclick = function(){
             oDiv2.style.height = '200px';
         }
         oH300.onclick = function(){
             oDiv2.style.height = '300px';
         }
         oH400.onclick = function(){
             oDiv2.style.height = '400px';
         }
         //获取确认和取消ID
         var oSure = $('blueS');
         var oCancle = $('blueC');
         //div3关闭
         oSure.onclick = function(){
             oDiv3.style.display = 'none';
         }
         //恢复默认设置 (不知道此处有没有其他更简洁的方式处理)
         oCancle.onclick = function (){
             oDiv3.style.display = 'none';
             oDiv2.style.background ='lawngreen';
             oDiv2.style.width = '100px';
             oDiv2.style.height = '100px';
             oDiv2.style.border = '1px solid gray';
             oDiv2.style.margin = '0 auto';
             oDiv2.style.radius = '5px';
         }
         //通用ID调取
         function $(id){
             return document.getElementById(id);
         }
     }
 </script>

　　Html内容：　

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>设定样式功能</title>
 </head>
 <body>
 <div class="div1">
     <h2 id="click">点此设置样式</h2>
     <div class="div0">
         <div id="div2"></div>
     </div>
 </div>
 <div class="div3" id="div3">
     <ul>
         <li>请选择背景色：</li>
         <li><span id="red">红</span><span id="yellow">黄</span><span id="blue">蓝</span></li>
         <li>请选择宽(px)：</li>
         <li><span id="w200">200</span><span id="w300">300</span><span id="w400">400</span></li>
         <li>请选择高(px)：</li>
         <li><span id="h200">200</span><span id="h300">300</span><span id="h400">400</span></li>
         <li class="last"><span id="blueC">恢复</span> <span id="blueS">确认</span></li>
     </ul>
 </div>
 </body>
 </html>