js，css控制元素全屏展示

Kratial

已于 2022-07-13 18:06:23 修改

阅读量742

点赞数 2

分类专栏： html5 js 文章标签： javascript css 前端

于 2022-07-13 17:44:14 首次发布

本文链接：https://blog.csdn.net/Kratial/article/details/125767288

版权

js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

控制全屏展示的方法

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

注意：这个方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。

此方法存在在不同浏览器中存在兼容性问题，需要加对应浏览器内核的前缀以webkit为例：

webkit： element.webkitRequestFullscreen()

取消全屏展示的方法

documnet.exitFullscreen()用于让当前文档退出全屏模式
此方法需要特定的前缀才能在不同的浏览器中使用,以webkit为例：

document.webkitExitFullscreen()

全屏展示相关的选择器

:fullscreen选择器选取处于全屏模式的元素

判断当前屏幕是否处于全屏的属性document.isFullScreen

同样也存在兼容性，需要加特定的前缀，例如

webkit: document.webkitIsFullscreen 值的类型为Boolean

该选择器也存在兼容性：

:-webkit-full-screen
:moz-full-screen

实例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            font-size: 20px;
            font-weight: 900;
            color: pink;
        }

        img {
            width: 200px;
            height: 200px;
        }
        /*
        :fullscreen选择器用于选取处于全屏模式的元素
        */
        .box:fullscreen{
            background-image: url(./img/1.jpeg);
        }
    </style>
</head>

<body>
    <div class="box">
        你好
        <img src="../img/1.jpeg" alt="">
        <button id="show">全屏展示</button>
        <button id="cancel">取消全屏</button>
    </div>
    <script>
        /*
        Element.requestFullscreen() 用于发出异步请求使元素进入全屏模式
        这个方法只能在用户交互或者设备方向改变的时候调用
        */
        let box = document.querySelector('.box'),
            showBtn = document.querySelector('#show'),
            cancelBtn = document.querySelector('#cancel')
        function showFullScreen() {
            if (box.requestFullscreen) {
                console.log('common')
                box.requestFullscreen()
            }
            if (box.webkitRequestFullscreen) {
                console.log(' webkit')
                box.webkitRequestFullscreen(() => {
                    console.log('success')
                }, () => {
                    console.log('error')
                })
            }
        }
        function cancelFullScreen() {
            if (document.exitFullscreen) {
                console.log('cancel common')
                document.exitFullscreen()
            }
        }
        showBtn.addEventListener('click', showFullScreen)
        cancelBtn.addEventListener('click', cancelFullScreen)
    </script>
</body>

</html>