emu in blogjava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks
需要在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控件一是为了让字体等宽避免宽度的微小变化,二是可以方便的填空格进去调整宽度而不用填&nbsp;

打开关闭状态可以通过读取元素的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>
posted on 2019-10-02 06:45 emu 阅读(32) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: