MIswitch

功能描述

实现点击按钮开启/关闭以及switch开关

依赖的模块

快速使用

相关html 结构 html <section class="section"> 一级结构 <label class='switch'> 二级结构 <input type='checkbox'> 三级结构 <span></span> </label> </section> <div class="switch-force"> 一级结构 <input type="button" class="switch-force-btn" id="switch_force" value="已开启" /> 二级机构 </div> 主要css样式css .section .switch 默认颜色 .section-red .switch-red 红色 .section-orange .switch-orange 橙色 .section-yellow .switch-yellow 黄色 .section-green .switch-green 绿色 .section-young .switch-young 青色 .section-blue .switch-blue 蓝色 .section-purple .switch-purple 紫色 .switch-normal .switch-normal-btn 开启/关闭按钮-正常 .switch-Abnormal .switch-Abnormal-btn 开启/关闭按钮-不正常 .switch-urgent .switch-urgent-btn 开启/关闭按钮-紧急 .switch-force .switch-force-btn 开启/关闭按钮-强制 开启/关闭按钮js var switch_normal = (function () {
var btn = document.getElementById('switch_normal'); 获取id var i = true; 判断按钮是否开启 btn.onclick = function () { 点击事件 if (i) { 判断当if=true是按钮关闭,反之开启 i = false;
document.getElementById('switch_normal').value = '已关闭'; document.getElementById('switch_normal').style.backgroundColor = '#BCBCBC'; } else { i = true; document.getElementById('switch_normal').value = '已开启'; document.getElementById('switch_normal').style.backgroundColor = '#7FFFD4'; } } })()

特别说明