5个前端实用技巧，有你不知道的吗？

1. steps实现打字效果

它将以逐字显示的方式呈现内容，就像打字一样。

<p>梨的前端小屋</p>
p {
  width: 11ch; 
  white-space: nowrap;
  overflow: hidden;
  animation: typing 2s steps(11);
}
@keyframes typing {
  from {
    width: 0;
  }
}

• ch: 目标元素的宽度可以容纳数字0的宽度，共x个。文中的11ch指的是，p元素的宽度可以容纳11个数字0的宽度。
• steps(11): 表示动画将通过 11 个步骤来逐渐显示文本内容。

2. 一行代码实现随机颜色值

#${Math.floor(Math.random() * 0xffffff) .toString(16)}

3. 获取网络带宽

没想到吧，js也可以获取到用户当前网络带宽。

if (navigator.connection) {
    const downlink = navigator.connection.downlink;
    console.log(`当前网络带宽: ${downlink} Mbps`);
} else {
    console.log("Network Information API 不被支持");
}

4. 隐藏DOM元素

常见方案

• display: none: 彻底移除渲染层
• opacity: 0: 保留布局但完全透明

其他方案-hidden

<p hidden>梨的前端小屋</p>

方案对比:
| 特性 | hidden属性 | display:none | opacity:0 |
|————|———–|————-|———–|
| 占用布局空间 | 否 | 否 | 是 |
| 屏幕阅读器可访问 | 是 | 否 | 否 |

5.平滑的滚动到元素指定位置

element.scrollIntoView({
  behavior: "smooth", // 平滑滚动动画
  block: "end",       // 垂直对齐方式
});

• scrollIntoView: 将元素滚动到可视区域。
  • behavior: 指定滚动的行为。auto（默认立即滚动）/ smooth（平滑过渡）

• block:对齐方式。
  start（顶部对齐）/ center（居中）/ end（底部对齐）

我的微信公众号： 梨的前端小屋