纯js全屏效果

最新推荐文章于 2025-10-24 15:16:38 发布

原创

最新推荐文章于 2025-10-24 15:16:38 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS #js实现全屏效果 #requestFullscreen

本文介绍了如何使用JavaScript的Element.requestFullscreen()方法实现全屏效果。通过在HTML中指定全屏DOM对象，并在JS中监听fullscreenchange和fullscreenerror事件来确保全屏操作的成功或失败处理。同时，文章提醒注意不同浏览器的兼容性问题。

废话不多说直接上代码吧！
HTML部分：

<!DOCTYPE html>
<html lang="en" id="Content">
<head>
  <meta charset="UTF-8">
  <title>全屏</title>
</head>
<body>
        <ul>
            <li>
                <a id="BtnFullOpen" href="javascript:void(0);" title="按“F11”进入全屏模式">
                    <i