点击切换样式小案例

**

切换样式小案例

点击切换多样式小案例，每天一个小案例，掌握一个小技巧
**
点击以上按钮出现弹框，如下图所示：
点击你需要的样式以及颜色，点击确认就可以啦，取消的的话弹框就没有啦；

下面是代码部分：

html部分：

<div class="box" id="box">
        <div class="box1" id="box1"></div>
        <input type="submit" value="点击显示样式" id="sub">
        <div class="box2" id="box2">
            <h2>大小</h2>
            <ul class="a">
                <li id="b">300*300</li>
                <li id="c">200*300</li>
                <li id="d">300*200</li>
                <li id="e">100*300</li>
            </ul>
            <h2>颜色</h2>
            <ul class="a">
                <li id="f">#ff0000</li>
                <li id="g">#00ff00</li>
                <li id="h">#0000ff</li>
                <li id="i">#00ffff</li>
            </ul>
            <button id="mox">确认</button>
            <button id="pox">取消</button>
        </div>
    </div>

CSS部分

 .box{
        width: 500px;
        height: 400px;
        border: 1px solid black;
    }
    .box1{
        width: 300px;
        height: 100px;
        border: 1px solid black;
        margin-left: 20px;
        margin-top: 20px;
        float: left;
    }
    input[type="submit"]{
        float: left;
        margin-top: 20px;
    }
    .box2{
        width: 250px;
        height: 350px;
        border: 1px solid black;
        position: absolute;
        top: 20px;
        left: 250px;
        background-color: white;
        display: none;
    }
    .a{
        display: flex;
        flex-wrap: wrap;
    }
    .a>li{
        width: 80px;
        height: 30px;
        border: 1px solid black;
        list-style: none;
        margin-top: 10px;
        margin-left: 10px;
        line-height: 30px;
        text-align: center;
    }

css样式根据你的喜好你自己怎样写，我写的就是这样，
JS部分

 var box = document.getElementById("box")
    var sub = document.getElementById("sub")
    var box2 = document.getElementById("box2")
    // 显示阴影层
    sub.onclick = function(){
        box.style.background= "rgba(0,0,0,0.2)";
        box2.style.display= "block";
        sub.style.display="none";
    }
    // 变换大小
    var b =document.getElementById("b")
    var c =document.getElementById("c")
    var d =document.getElementById("d")
    var e =document.getElementById("e")
    var box1 = document.getElementById("box1")
    b.onmouseenter = function(){
        box1.style.width = "300px";
        box1.style.height = "300px";
    }
    c.onmouseenter = function(){
        box1.style.width = "200px";
        box1.style.height = "300px";
    }
    d.onmouseenter = function(){
        box1.style.width = "300px";
        box1.style.height = "200px";
    }
    e.onmouseenter = function(){
        box1.style.width = "100px";
        box1.style.height = "300px";
    }
    // 变换颜色
    var f =document.getElementById("f")
    var g =document.getElementById("g")
    var h =document.getElementById("h")
    var i =document.getElementById("i")
    f.onmouseenter = function(){
        box1.style.background = "#ff0000"
    }
    g.onmouseenter = function(){
        box1.style.background = "#00ff00"
    }
    h.onmouseenter = function(){
        box1.style.background = "#0000ff"
    }
    i.onmouseenter = function(){
        box1.style.background = "#00ffff"
    }
    // 确认
    var mox =document.getElementById("mox")
    mox.onclick = function(){
        box2.style.display="none";
        box.style.background="";
        sub.style.display="block";
    }
    // 取消
    var pox =document.getElementById("pox")
    pox.onclick = function(){
        box2.style.display="none";
        box1.style.background="";
        box.style.background="";
        box1.style.width="";
        box1.style.height="";
        sub.style.display="block";
    }

以上就是这个小案例啦喜欢的同学点个收藏吧，不喜欢的勿喷哦！！！