需要在html頁面上用到一個switch控件，html5沒有現(xiàn)成的，網(wǎng)上流傳的版本都有點(diǎn)復(fù)雜，代碼量偏大甚至有獨(dú)立的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控件一是為了讓字體等寬避免寬度的微小變化，二是可以方便的填空格進(jìn)去調(diào)整寬度而不用填
打開關(guān)閉狀態(tài)可以通過讀取元素的c屬性，當(dāng)然也可以直接用標(biāo)記相應(yīng)屬性的全局變量來代替，免去了再讀取元素屬性的麻煩:
<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>