网页全屏切换按钮：如何用JS控制HTML元素的显示状态-html教程-PHP中文网

全屏切换与元素显隐是两套独立机制：按钮仅触发requestfullscreen()，显隐需手动控制css类或样式；须监听fullscreenchange事件并检查fullscreenelement来同步状态，注意兼容性与权限限制。

网页全屏切换按钮：如何用js控制html元素的显示状态

全屏切换按钮本身不控制元素显示状态，它只触发浏览器全屏 API；真正控制元素显隐的是 display、visibility 或 CSS 类切换逻辑——这两件事常被混为一谈，但必须分开处理。

全屏切换和元素显隐是两套独立机制

点击“全屏”按钮时，你可能想让某个容器撑满屏幕，同时隐藏导航栏、侧边栏等干扰 UI。但 requestFullscreen() 只会让目标元素占据整个屏幕，并不会自动修改其他元素的 display 或 visibility。如果你没手动干预，那些元素依然在 DOM 中、仍占布局空间、甚至可能遮挡内容。

全屏 API 作用对象是 DOM 元素（如 document.documentElement 或某个 <div id="player">），它只改变渲染层的尺寸和层级，不改样式属性 <li>元素显隐需额外用 JS 控制：比如给 <code><header></header> 加 style.display = 'none'，或切换 hidden 类
退出全屏时，这些显隐状态不会自动恢复，必须监听 fullscreenchange 事件手动还原

用 `classList.toggle()` 管理显隐状态最可靠

比起反复写 element.style.display = 'block' / 'none'，用 CSS 类配合 classList.toggle() 更可控、易维护，也避免内联样式污染。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

先定义 CSS：
```
.hidden { display: none !important; }
```
绑定按钮点击时，同时做两件事：targetElement.requestFullscreen() + document.querySelector('header').classList.add('hidden')
监听 document.addEventListener('fullscreenchange', () => { ... })，在退出时移除 hidden 类
注意：不要在全屏进入后立即操作 DOM，部分浏览器会延迟触发 fullscreenchange，建议加个 setTimeout 微任务缓冲（16ms 足够）

`fullscreenchange` 事件里怎么判断当前状态

不能只靠 document.fullscreen 布尔值，它在 Safari 16.4+ 之前返回 undefined，且退出全屏时该值可能滞后于事件触发时机。

正确做法是检查 document.fullscreenElement 是否为 null：

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement === null) {
    // 已退出全屏，恢复 header、sidebar 等
    document.querySelector('header').classList.remove('hidden');
  } else {
    // 进入全屏，隐藏非核心区域
    document.querySelector('header').classList.add('hidden');
  }
});

别用 document.webkitIsFullScreen 或 document.msFullscreenElement —— 这些已废弃，现代浏览器统一用 fullscreenElement
移动端 Safari 不支持任意元素全屏（只允许 <video></video>），此时 requestFullscreen() 会静默失败，fullscreenchange 也不会触发，得提前检测并降级处理

容易被忽略的兼容性与权限细节

全屏必须由用户手势触发（如 click、touchend），且页面需运行在 HTTPS 或 localhost 上，否则 requestFullscreen() 会直接抛出 SecurityError。

错误信息 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture 意味着你试图在定时器、fetch 回调或 load 事件里调用，必须挪到 click handler 内
Chrome 95+ 和 Firefox 91+ 已移除所有前缀（webkitRequestFullScreen 等），只保留标准 requestFullscreen()；但旧版 Android WebView 仍需 fallback
如果目标元素是 iframe，需确保其 allow="fullscreen" 属性存在，否则全屏请求会被拒绝

真正麻烦的不是调用 API，而是同步管理全屏状态与 UI 显隐的生命周期——尤其是退出时忘记还原、移动端无响应、或者多个全屏入口状态不同步。这些细节不写进事件监听里，光靠按钮点击根本不可靠。