你可能不知道，前端这五个有用的技术可以这么酷！

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 27 4

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章你可能不知道，前端这五个有用的技术可以这么酷！由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

为了让大家编程更轻松一些，本挑选一些有用的但相对比较少见有用的技巧。废话不多说，开车了.

1.快速隐藏 。

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

1. <p hidden>该段落在页面上是不可见的，它对HTML是隐藏的。</p> 

不过，这个技巧对伪元素不起作用.

2. 迅速定位 。

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

1. // Before 
2. div { 
3.   position: absolute; 
4.   top: 0; 
5.   left: 0; 
6.   bottom: 0; 
7.   right: 0; 
8. } 
9.  
10. // After 
11. div { 
12.   position: absolute; 
13.   inset: 0; 
14. } 

3.前端测网速 。

Chrome浏览器提供了原始的APInavigator.connection.downlink 可以访问用户当前网络环境的网络带宽.

1. navigator.connection.downlink; 

connection.downlink返回的并不是用户当前环境的展示的网络传输速度，而是当前网络的带宽，官方说法是：返回以Mb/s为单位的有效带宽，并保留该值为25kb/s的最接近的整数倍.

例如，我在我家里Chrome浏览器控制台跑一下navigator.connection.downlink这段语句，结果返回的是10, 表示下载带宽是10M的.

具体场景看这篇文章：https://www.zhangxinxu.com/wordpress/2021/04/navigator-connection-downlink/ 。

4.禁止拉动刷新 。

CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为。使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动 。

1. body { 
2.  overscroll-behavior-y: contain; 
3. } 

这个属性对于组织模态窗口内的滚动也非常有用--它可以防止主页面在到达边界时拦截滚动.

具体场景参考这篇文章：https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/ 。

5. 禁止插入文字 。

当用户在浏览器用户界面发起“粘贴”操作时，会触发paste事件.

有时间，我想禁止用户从某个地方复制的文本粘贴到输入框中。通过监听paste事件并调用其方法preventDefault()，这可以很容易做到.

1. <input type="text"></input> 
2. <script> 
3.   const input = document.querySelector('input'); 
4.  
5.   input.addEventListener("paste", function(e){ 
6.     e.preventDefault() 
7.   }) 
8.  
9. </script> 

~完，我是小智.

作者：Shadeed 译者：前端小智 来源：dev 。

原文：https://dev.to/ra1nbow1/6-useful-frontend-techniues-that-you-may-not-know-about-47hd 。

原文地址：https://mp.weixin.qq.com/s/mr4a71XhsVDs0cznoLN98Q 。

最后此篇关于你可能不知道，前端这五个有用的技术可以这么酷！的文章就讲到这里了,如果你想了解更多关于你可能不知道，前端这五个有用的技术可以这么酷！的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0

• c++ - 使用 TextPad/G++ 链接和编译 C++ 文件时出错，可能(可能)只是语法？

  这很可能是我的语法错误，因为我对在 C++ 中使用多个文件和结构(特别是将结构传递给函数)还很陌生。这是三个文件: 主要.cpp: #include #include #include #inc

• typescript - 类验证器的高级条件(可能)？

  我有 TypeScript NestJS 项目。 我需要验证传入的 DTO 到我的 API。它可以被描述为“创建项目”，其中我们有建筑类型(房屋、公寓、花园)，并根据该类型我们需要定义: 房屋:楼层包

• c# - 排除通用约束中的类型(可能？)

  是否可以从可用于泛型参数的可能类型集中排除特定类型？如果是如何。 例如 Foo() : where T != bool 将意味着除了类型 bool 之外的任何类型。 编辑 为什么？ 以下代码是我尝试强

• javascript - 纹理未生成有效(可能)

  我的 WebGL 体积光线转换应用程序即将完成。但是我发现了一个问题。我必须通过 2D 纹理模拟 3D 纹理。这不是问题。我正在用小切片创建一个巨大的纹理。巨大纹理的尺寸约为 4096x4096 像素

• javascript - 返回顶部按钮问题(可能)？

  我正在处理的网页上显示了一个返回顶部按钮。当您向下滚动时，有时单击它时，它会跳到顶部，然后跳回您在页面上的位置，然后像预期的那样平滑滚动到顶部。请记住，它并不总是这样做。这只是一个滞后或故障问题还是我

• C#(可能)使用泛型

  我对此还很陌生，所以请耐心等待。 我有一个类，它具有三个属性:几个整数和一个用户定义对象的集合。 public class Response { public int num1 { get;

• java - (可能)非常简单的Java多线程问题

  我正在制作一款平台游戏，让玩家每 30 毫秒跳跃一次，并向上添加少量的力。我想我应该使用多线程，因为我之前已经做过一些，而且看起来很简单。无论如何，我尝试了这个: public void jump()

• c# - 排除通用约束中的类型(可能？)

  是否可以从可能的类型集中排除特定类型，这些类型可以在泛型参数中使用？如果是这样的话。 例如 Foo() : where T != bool 表示除 bool 类型之外的任何类型。 编辑 为什么？ 以下

• mysql - 查询中内部和外部连接在一起，可能

  我正在尝试在单个查询中实现内部和外部联接，我不确定我的做法是正确还是错误，因为我不太擅长查询。 就这样吧。 我有以下表格。 hrs_residentials hrs_residential_utili

• javascript - 冲突的脚本......可能

  关于 my website ，有一段代码可以向页面添加几个元素。这段代码不是我可以编辑的东西，而且我对它放置这些元素的位置不满意，因为它弄乱了我的一些布局。所以我想出了一个小的 jQuery 来将它们

• Postgresql:以下选择是否合理/可能？

  一位客户希望我创建一个数据集，如下所示。我不知道这是否可能或合乎逻辑。 我有表parent: id name ------- ------- 1 parent1 2

• javascript - 检测其他打开的网站甚至应用程序的数量(可能)？

  这可能吗？google 好像没有这方面的资料.. 这样，如果用户在另一个网站上播放视频或歌曲，我的音量就会自动减小 最佳答案 不，这是不可能的。 如果可能的话，它必须是特定于浏览器的，但我不认为这种情

• javascript - 响应式设计而不是此示例的自适应设计 - 可能

  所以我正在尝试制作响应式页面。问题是为什么它归结为移动数据需要位于列表中。 我会用一些示例代码来解释 所以这可能是桌面上的输出 option1

• html - 将鼠标悬停在(可能？)

  当您将鼠标悬停在a 元素 上时，是否可以删除url？ 这就是我的意思: 最佳答案 一种选择是使用一些 JavaScript。 删除 href=来自 的属性标签，取而代之的是 onclick=...

• algorithm - (可能)一个线段树应用

  我已经考虑了几个小时，但我无法取得太大进展。它是这样的: You have an array of size n and q queries. Each query is of the form (l

• android - 脚本运行速度太快了!可能

  我一直在尝试编写一个脚本来强化 android。我没有成功! 我正在通过模拟器运行一个 AVD，并且已经用我加载的 android shell 和 bash shell 试过了。正如您将在下面看到的那

• excel - InStr 值数组(可能？)

  Private Sub Workbook_Open() Dim WBname As String WBname = ThisWorkbook.name If Not InStr(WBname, "te

• scala - Spark 卡在删除广播变量(可能)

  Spark 2.0.0-预览版 我们有一个应用程序使用了相当大的广播变量。我们在大型 EC2 实例上运行它，因此部署处于客户端模式。广播变量是一个巨大的 Map[String, Array[Strin

• regex - 带有xpath或regex的R中的Web抓取(可能)格式不正确的HTML

  我正在尝试从此link中提取摘要。但是，我无法仅提取摘要的内容。到目前为止，这是我完成的工作： url <- "http://www.scielo.br/scielo.php?script=sci_a

• asp.net - 将ModalPopup移动到IFrame之外。可能？

  我的主页中有一个iframe。 iframe页面中有一个modalpopup。因此，当显示modalpopup时，modalpopup的父级是iframe主体和主页父级主体。因此，覆盖层仅覆盖ifra