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

　　附加效果图：

　　

　　CSS内容：

　　

<style>
    *{margin:0; 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>