让人眼前一亮的五个前面小窍门

让大家程序编写更加轻松一些，本挑选一些有价值的但是相对于非常罕见有价值的方法。话不多说，开车了。

1.快速隐藏

要掩藏一个DOM原素，不用JavaScript。一个原生的HTML特性就足够掩藏。实际效果类似添加一个style display: none;。

<p hidden>该文章段落在页面中是不可见的，它对于HTML是隐藏。</p>

但是，这一方法对伪元素失灵。

2. 快速精准定位

了解`inset` CSS 特性吗？这是`top`、`left`、`right`和`bottom`的简称版本号。与缩写的`margin`和`padding`相近，大家可以在一行中设置一个元素全部偏移。

// Before
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

// After
div {
  position: absolute;
  inset: 0;
}

3.前面测网速

Chrome电脑浏览器带来了最原始的API navigator.connection.downlink 能够浏览客户互联网环境环境中的服务器带宽。

navigator.connection.downlink;

connection.downlink回到的不是客户现阶段自然环境的展示的互联网传输速率，反而是互联网环境的网络带宽，官方解释是：回到以Mb/s为单位合理网络带宽，并保留该数值25kb/s的比较接近的整数。

比如，我从我家中Chrome电脑浏览器控制面板跑一下navigator.connection.downlink这一段句子，结论返回是10, 表明免费下载网络带宽是10M的。

4.严禁带动更新

CSS overscroll-behavior特性容许开发者在符合具体内容顶部/底端时遮盖浏览器默认设置外溢翻转个人行为。使用这个实例包含禁止使用挪动设备上的“带动到更新”作用，清除过多翻转发亮和皮筋儿实际效果，并防止页面内容在多形式/累加层下翻转

body {
 overscroll-behavior-y: contain;
}

这一特性针对机构多形式对话框里的翻转也非常有利--它能够防止主界面在到达界限时阻拦翻转。

5. 严禁插入文字

当客户用浏览器操作界面进行“黏贴”操作过程中，会开启paste事情。

有空，我觉得严禁客户从一个地方复制文字黏贴到文本框中。根据监视paste事件并启用其方式preventDefault()，这样可以非常容易保证。

<input type="text"></input>
<script>
  const input = document.querySelector('input');

  input.addEventListener("paste", function(e){
    e.preventDefault()
  })

</script>

代码部署后可能出现的BUG无法即时了解，过后为解决这种BUG，花掉了大量时间开展log 调节，这里顺带给大家推荐一个实用的BUG监控工具 Fundebug。

强烈推荐学习培训：css视频教学

以上就是关于让人眼前一亮的五个前面小窍门的具体内容，大量欢迎关注AdminJS其他类似文章！