码迷,mamicode.com
首页 > 其他好文 > 详细

每日思考(2019/12/14)

时间:2019-12-14 20:45:51      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:增加   animation   每日   激活   界面   function   属性   backspace   relative   

题目概览

  • 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>
  • 结合checkboxradio表单元素实现纯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>
  • inputfocus事件会触发锚点定位,我们可以利用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;
}

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

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

每日思考(2019/12/14)

标签:增加   animation   每日   激活   界面   function   属性   backspace   relative   

原文地址:https://www.cnblogs.com/EricZLin/p/12040812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!