需要在html页面上用到一个switch控件，html5没有现成的，网上流传的版本都有点复杂，代码量偏大甚至有独立的css和js片段的依赖，用起来不像html控件那么简单，有一些动画之类的需求镀金也不是太必要，随手写个极简版的用着：
<pre onclick="this.c=!this.c;style.backgroundColor=c?‘green‘:‘‘;innerHTML=c?‘on ○‘:‘○ off‘" style="border-radius:0.7em;border:1px solid black;padding:0 0.4em;display:inline;float:right">○ off</pre>
用pre控件一是为了让字体等宽避免宽度的微小变化，二是可以方便的填空格进去调整宽度而不用填
打开关闭状态可以通过读取元素的c属性，当然也可以直接用标记相应属性的全局变量来代替，免去了再读取元素属性的麻烦:
<script> var switchState; </script> <pre onclick="style.backgroundColor=(switchState=!switchState)?‘green‘:‘‘;innerHTML=switchState?‘on ○‘:‘○ off‘" style="border-radius:0.7em;border:1px solid black;padding:0 0.4em;display:inline;">○ off</pre>
原文：https://www.cnblogs.com/stonehuang/p/11616609.html