JavaScript模拟设置checkbox选中打勾颜色效果代码
貌似使用css设置checkbox复选框选中打勾的颜色比较困难,下面就使用js模拟实现一个。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .cbox{ display:block; width:16px; height:16px; border:1px solid #ccc; background:#fff; } .cbox.cked{color:blue;} .cbox.cked:after{content:"√"} </style> <script> window.onload=function(){ var ospan=document.getElementsByTagName("span")[0]; ospan.onclick=function(){ var reg=/cked/ig; this.className=reg.test(this.className)?this.className.replace('cked',''):(this.className+' cked') } } </script> </head> <body> <span class="cbox"></span> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
(2).var ospan=document.getElementsByTagName("span")[0],获取span元素集合中的第一个span元素。
(3).ospan.onclick=function(){},为span元素注册click事件处理函数。
(4).var reg=/cked/ig,创建一个正则表达式就是用来匹配字符串"cked"。
(5).this.className=reg.test(this.className)?this.className.replace('cked','') : (this.className+' cked'),此段代码的功能是,如果元素当前class样式类中有cked,那么就将ched删除,否则添加cked。
二.相关阅读:
(1).:after参阅css after伪对象选择器一章节。
(2).getElementsByTagName()参阅document.getElementsByTagName()一章节。
(3).className属性参阅js className属性一章节。
(4).replace()可以参阅javascript replace()一章节。
(5).test()可以参阅正则表达式test()函数一章节。
JavaScript模拟设置checkbox选中打勾颜色效果代码,这样的场景在实际项目中还是用的比较多的,关于JavaScript模拟设置checkbox选中打勾颜色效果代码就介绍到这了。
JavaScript模拟设置checkbox选中打勾颜色效果代码属于前端实例代码,有关更多实例代码大家可以查看。