JavaScript模擬設定checkbox選中打勾顏色效果程式碼
貌似使用css設定checkbox核取方塊選中打勾的顏色比較困難,下面就使用js模擬實現一個。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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點選設定背景顏色的選項卡程式碼JavaScript
- JavaScript WebGL 設定顏色JavaScriptWeb
- JavaScript模擬HashMap類效果程式碼JavaScriptHashMap
- 設定placeholder字型顏色程式碼
- 點選按鈕設定其背景顏色程式碼例項
- 網頁點選選擇設定文字不同顏色程式碼例項網頁
- 設定文字的選中狀態背景顏色
- javascript文字彩虹式顏色漸變效果程式碼例項JavaScript
- qt 設定選單欄顏色QT
- 設定placeholder顏色程式碼例項
- 顏色程式碼選取工具
- css3自定義checkbox核取方塊打勾效果程式碼例項CSSS3
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- 設定CCLabelTTF,選單字型顏色
- JavaScript checkbox全選和全不選效果JavaScript
- JavaScript設定checkbox核取方塊選中狀態JavaScript
- js設定輸入的文字不同顏色效果JS
- CSS設定選中文字的顏色CSS
- css設定placeholder字型顏色程式碼例項CSS
- CSS設定選中網頁文字時的背景和顏色CSS網頁
- javascript模擬實現滾動條效果程式碼例項JavaScript
- 如何決定介面設計中顏色
- javascript網頁背景顏色漸變效果JavaScript網頁
- JavaScript模擬拋物效果JavaScript
- 設定toast的字型顏色和背景顏色AST
- CSS設定滑鼠選中文字的顏色CSS
- javascript模擬實現連結的title效果例項程式碼JavaScript
- javascript模擬美化select下拉選單效果詳解JavaScript
- AUTOCAD——設定顏色
- css 設定背景顏色CSS
- 設定Toast字型顏色AST
- ProgressBar 顏色的設定
- system命令設定顏色
- jquery 設定checkbox選中 和獲取選中值jQuery
- CSS顏色程式碼CSS
- JavaScript元素點選背景顏色切換JavaScript
- 模擬美化checkbox核取方塊程式碼例項
- CAD如何設定顏色