html
-
label都有哪些作用，并舉相應(yīng)的例子說明
input 和 label 互相關(guān)聯(lián)機制
label不會向用戶呈現(xiàn)任何特殊效果颤陶。但是當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上梭灿。
label 標(biāo)簽的for屬性應(yīng)當(dāng)與相關(guān)元素的 ID 屬性相同
-
label 通常用來關(guān)聯(lián)一個表單控件
<label for="hobby">愛好</label> <input id="hobby" type="checkbox" value="0"> -
例1 利用
label模擬button來解決不同瀏覽器原生button樣式不同問題<input type="button" id="btn"> <label for="btn">Button</label> -
例二 結(jié)合
checkbox遭垛、radio表單元素實現(xiàn)純CSS狀態(tài)切換。比如控制CSS動畫播放和停止<input type="checkbox" id="controller"> <label class="icon" for="controller"> <div class="play"></div> <div class="pause"></div> </label> <div class="animation"></div> <style> .... </style> -
input 的 focus 事件會觸發(fā)錨點定位节槐，可以利用
label當(dāng)觸發(fā)器實現(xiàn)選項卡切換效果<div class="box"> <div class="list"><input id="one" readonly>1</div> <div class="list"><input id="two" readonly>2</div> <div class="list"><input id="three" readonly>3</div> <div class="list"><input id="four" readonly>4</div> </div> <div class="link"> <label class="click" for="one">1</label> <label class="click" for="two">2</label> <label class="click" for="three">3</label> <label class="click" for="four">4</label> </div> <style> .box { width: 20em; height: 10em; border: 1px solid #ddd; overflow: hidden; } .list { height: 100%; background: #ddd; text-align: center; position: relative; } .list > input { position: absolute; top:0; height: 100%; width: 1px; border:0; padding: 0; margin: 0; clip: rect(0 0 0 0); } </style>
css
-
用css創(chuàng)建一個三角形搀庶，并簡述原理
http://caibaojian.com/css-border-triangle.html
利用盒模型的border，將盒子寬高設(shè)置為0疯淫，四個邊剩余三邊顏色設(shè)置為透明
js
-
寫一個去除制表符和換行符的方法
// 特殊符號 \f 匹配一個換頁符 \n 匹配一個換行符 \t 匹配一個制表符 \v 匹配一個垂直制表符 \r 回車 + 表示匹配前一個字符一次或者多次 ^ 表示匹配輸入的開頭 $ 表示匹配輸入的末尾 g 全稱是global地来，全局匹配function fn(str){ let s = str.replace(/\t|\n|\v|\f|\r/g,'') return s; }
