以为要写 100 行 JS？这 8 个功能浏览器原生就有

更新于 2026-08-21 16:07# 前端

以为要写 100 行 JS？这 8 个功能浏览器原生就有

"这个效果得靠框架吧？""这个交互要写 JS 吧？"

很多想自学前端的人，卡在第一步：以为什么都要装环境、配框架、学一年脚手架。但有一个反常识的真相——浏览器原生就藏着一整抽屉现成的零件，很多你以为是"高级能力"的功能，其实一行 HTML 就够。

这篇不绕弯子，直接给你 8 个"浏览器自己就会"的功能。每个都附一段能直接复制的代码，把下面的代码存成 .html 文件，双击用浏览器打开，马上就能看到效果——不需要装任何东西。

1. popover —— 弹层不用 JS

想做一个点击弹出来的小浮层/气泡？不需要写 JS 管理开关和层级。用 popover 属性，按钮和浮层都用 HTML 属性连起来：

<button popovertarget="demo">点我弹出</button>
<div id="demo" popover>
  <p>没有一行 JavaScript，点了就弹、点外面就收。</p>
  <button popovertarget="demo" popovertargetaction="hide">关闭</button>
</div>

点一下按钮就弹出来，点外面空白处自动收起来。这就是"现代浏览器魔法"。

2. dialog —— 模态对话框是亲生的

页面中间的"弹窗对话框"，HTML 有专门的元素 <dialog>，同样用 popover 就能纯 HTML 开关：

<dialog id="mydialog" popover>
  <p>这是一个原生对话框</p>
  <form method="dialog"><button>关闭</button></form>
</dialog>
<button popovertarget="mydialog">打开对话框</button>

想要更"正式"的模态，再用 3 个字符：showModal()，浏览器直接把它做成带遮罩层的模态框，连"点遮罩关闭""按 Esc 关闭"都顺手定义了。

3. grouped <details> —— 手风琴合上自带

<details> 是 HTML 自带的"点击展开/收起"。以前做一个"手风琴"（开一个、关一个）得写 JS 管理状态，现在只需要给一组 <details> 起同一个 name：

<details name="group">
  <summary>第一项</summary><p>内容一</p>
</details>
<details name="group">
  <summary>第二项</summary><p>打开了这个，上面那个会自动合上。</p>
</details>

打开第二个，第一个自动关上。纯 HTML，零脚本。

4. command / commandfor —— 按钮直接"指挥"另一个元素

这个更省事：一个按钮加两个属性，就能控制另一个元素的开关，连 JS 都不用写。目前 show-popover、hide-popover、toggle-popover、close、show-modal 已经在浏览器里落地：

<button command="show-popover" commandfor="mydialog">打开</button>
<button command="hide-popover" commandfor="mydialog">关闭</button>
<dialog id="mydialog" popover><p>被命令控制的弹层</p></dialog>

按钮直接"指名道姓"控制目标，省掉一整套事件绑定。

5. loading="lazy" —— 图片懒加载一句话

图片在用户滑到附近才加载，能省不少流量和首屏时间。以前这得写复杂的 IntersectionObserver 监听，现在加一个属性：

<img src="大图.jpg" loading="lazy" width="400" height="300" alt="图片说明">

一句 loading="lazy"，懒加载就是浏览器你的事了。

6. hidden="until-found" —— "藏起来，但能被搜到"

这个很新，但有巧思：内容平时隐藏，但当用户用浏览器"页内查找"（Ctrl/Cmd+F）搜到它时，浏览器自动把它显示出来：

<a href="#secret">跳到隐藏内容</a>
<div id="secret" hidden="until-found">惊喜！你找到我了</div>

这是给"搜索才发现"彩蛋用的，算是"网页找彩蛋"最省事的一种做法。

7. 表单小部件全家桶 —— 取色、日期、进度条都是亲生的

取色器、日期选择、滑块、进度条、仪表盘，全都有原生元素，不需要引一个"日期组件库"：

<label>选个颜色 <input type="color" value="#663399"></label>
<label>日期 <input type="date"></label>
<label>滑块 <input type="range" min="0" max="100" value="50"></label>
<progress value="42" max="100">42%</progress>

配上这几个标签，一个"配置页"的表单控件就齐了。

8. datalist —— 原生输入建议，不引下拉库

想要输入框打字出现候选提醒？<datalist> 原生就给：

<input list="suggest" placeholder="输入看看有什么提示">
<datalist id="suggest">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
</datalist>

原生自动补全，不用引任何"自动补全组件"。

一句大实话：学会这几个，别急着上生产

作者 Chris Burnell 把这篇做成页面时，特意补了一句忠告：这 8 个里，有几个（尤其是颜色/日期/滑块那几个表单控件和 datalist）不同浏览器长得不一样，无障碍体验还不太好。

所以正确的打开方式是：

  • 学、想明白"原来不用这么麻烦"——这部分是今天最大的收益，看完你会对"前端没那么玄"更有底；
  • 新手练手、做个人小项目——用得很爽；
  • 要上正式生产，先把浏览器兼容性和无障碍（aria 这些）查一遍再动手。

一句话总结：别让"得装一堆东西"吓住自己。你手边这台电脑的浏览器，已经比你以为的能干得多。

（参考：chrisburnell.com 的《HTML Can Do That》）