开关按钮用css实现

因为用layui时有个样式css文件影响了全局，所以就自己动手写了一个开关按钮组件

首先创建两个div

htlml部分：

<div style="z-index:2" id="on"class="on" οnclick="on(1)" >

<p style="margin-right: 14px">ON</p>

<p class="onbtn"></p>

</div>

<div style="z-index: 1" id="off" οnclick="on(2)" class="off">

<p class="offbtn"></p>

<p>OFF</p>

</div>

这个是我的css部分：

.on{
    position: absolute;
    background-color: rgb(18, 176, 144);
    color: white;
    font-size: 10px;
    padding:  0 5px 0 8px;

    display: flex;
    align-items: center;
    width: 50px;
    height: 22px;
    border-radius: 50px
}
.off{
    background-color:white;
    color: silver;
    font-size: 10px;
    padding:  0 5px 0 8px;
    border: 1px solid silver;
    display: flex;
    align-items: center;
    width: 50px;
    height: 22px;
    border-radius: 50px;
    position: relative;
    top: -1px;
    left: -1px;

}
.onbtn{
    height: 18px;width: 18px;border-radius: 50%;background-color: white
}
.offbtn{
    height: 18px;width: 18px;border-radius: 50%;background-color:silver;margin-right: 6px
}

我是用了定位position，之后让两个按钮进行重叠，然后使用js，达到开关得效果

 这个是结合js代码用在了项目上，和layui效果一样，layui得代码一行就可以了，我的只是做个分享，万一可以用到尼，对吧

最后，我把js部分也放在了下面：

function on(val,pkid) {
    var off=document.getElementById("off")
    var on=document.getElementById("on")
    if(val==1){ //已置顶
        on.style.zIndex=1
        off.style.zIndex=2
    }else { //未置顶
        on.style.zIndex=2
        off.style.zIndex=1
    }

根据实际项目需求，如果需要循环的话，别忘了修改一下id。