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