[html] [label都有哪些作用?并举相应的例子说明]
[css] [用css创建一个三角形,并简述原理](https://github.com/haizlin/fe-
[js] [写一个去除制表符和换行符的方法]
HTML:
<label>的作用
表示用户界面中某个元素的说明
增加命中区域,屏幕阅读器可以读出标签。使使用辅助技术的用户更容易理解输入 哪些数据
用法
单击关联标签激活input,需给input一个id属性,给label一个for属性,设为同一个值
注意事项
一个 input 可以与多个标签相关联。
标签本身并不与表单直接相关。它们只通过与它们相关联的控件间接地与表单相关联。
当点击或者触碰(tap)一个与表单控件相关联的 时,关联的控件的 click 事件也会触发。
--------------------------------------------------------------------
前面那些同学已经说到input与label互相关联的机制,这里我就说一下具体实例:
利用label"模拟"button来解决不同浏览器原生button样式不同的问题
<input type="button" id="btn">
<label for="btn">Button</label>
<style>
input[type='button'] {
display: none;
}
label {
display: inline-block;
padding: 10px 20px;
background: #456;
color: #fff;
cursor: pointer;
box-shadow: 2px 2px 4px 0 rgba(0,0,0,.3);
border-radius: 2px;
}
</style>
结合checkbox、radio表单元素实现纯CSS状态切换,这样的实例就太多了。比如控制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>
...
#controller:checked ~ .animation {
animation-play-state: paused;
}
...
</style>
还有一个基于 radio 的实例:摩斯密码键盘
input的focus事件会触发锚点定位,我们可以利用label当触发器实现选项卡切换效果。下面代码选自张鑫旭《CSS世界》。实际效果链接
<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:
<div class='rect'></div>
<style>
.rect {
width: 0;
height: 0;
background-color: #fff;
border-right: 100px solid rgb(34, 230, 220);
border-left: 100px solid rgb(202, 146, 25);
border-top: 100px solid rgb(29, 156, 194);
border-bottom: 100px solid rgb(16, 204, 101);
}
</style>
image
创建一个div,宽高都为0,实现效果如下,发现border的四个边都是一个三角形,要实现三角形只需将其中几个边background设置为transparent,即可得到三角形
<style>
.rect {
width: 0;
height: 0;
background-color: #fff;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 100px solid rgb(29, 156, 194);
border-bottom: 100px solid transparent;
}
</style>
image
JS:
// 方法一
var str = '大家好 阿斯蒂芬阿斯顿\n发生的发生';
function fn(str) {
var s = str.replace(/\s+/g,'');
return s;
}
console.log(fn(str))
\s会匹配空格,还是老实用[\t\n\v\r\f]吧
// 方法二:
/**
* \n 换行符 new line
* \r 回车符 return
* \t 制表符 tab
* \b 退格符 backspace
* \f 换页符 form feed
* @param {*} str
*/
function fn(str) {
return str.replace(/[\t\n]/g, '')
}
只让去除制表符合换行符,很多人把不该去除的也去除了