让人眼前一亮的五个前端小技巧

1.快速隐藏

要隐藏⼀个DOM元素，不需要JavaScript。⼀个原⽣的HTML属性就⾜以隐藏。其效果类似于添加⼀个style display: none;。

该段落在页⾯上是不可见的，它对HTML是隐藏的。

不过，这个技巧对伪元素不起作⽤。2. 迅速定位

熟悉`inset` CSS 属性吗？它是`top`、`left`、`right`和`bottom`的缩写版本。与简写的`margin`和`padding`类似，我们可以在⼀⾏中设置⼀个元素的所有偏移量。

// Beforediv {

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

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()，这可以很容易做到。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了⼤量的时间进⾏log 调试，这边顺便给⼤家推荐⼀个好⽤的BUG监控⼯具 Fundebug。

以上就是让⼈眼前⼀亮的五个前端⼩技巧的详细内容。（）