极简的switch控件

时间：2019-10-02 09:11:01 收藏：0 阅读：103

需要在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