每日思考（2019/12/14）

Posted 2021-03-23 ericzlin

题目概览

• label都有哪些作用？并举相应的例子说明
• 用css创建一个三角形，并简述原理
• 写一个去除制表符和换行符的方法

题目解答

label都有哪些作用？并举相应的例子说明

• 表示用户界面中某个元素的说明增加命中区域，屏幕阅读器可以读出标签。使使用辅助技术的用户更容易理解输入哪些数据，单击关联标签激活input，需给input一个id属性，给label一个for属性，设为同一个值；有两个属性，for和accesskey，for 属性用来关联表单，accesskey属性设置快捷键

  <label for="hobby" accesskey＝"N">爱好</label>
  <input id="hobby" type="checkbox"  value="0">

• 利用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>

• input的focus事件会触发锚点定位，我们可以利用label当触发器实现选项卡切换效果

  <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创建一个三角形，并简述原理

原理：宽高设为0，四个边框设置border-width，border-style，border-color即可，如果某个三角要变为透明，设置border-color为transparent

div{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

写一个去除制表符和换行符的方法

/**
 * 
 换行符 new line
 * 
 回车符 return
 * 	 制表符 tab
 *  退格符 backspace
 * f 换页符 form feed
 * @param {*} str
 */
function fn(str) {
    return str.replace(/[	
]/g, '')
}