極簡的switch控件

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