html测试点击按钮全屏显示功能

莹莹酱~

已于 2023-12-13 17:31:12 修改

阅读量534

点赞数 9

分类专栏： html 文章标签： html 前端 javascript

于 2023-12-13 17:17:34 首次发布

本文链接：https://blog.csdn.net/qq_36825145/article/details/134977401

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <img src="./img/全屏 .png" alt="" > -->
        <button onclick="full_screen()">点击</button>
    </div>
    <script>
        // 全屏与缩小
        function full_screen() {
            var element = document.getElementsByClassName("box")[0];
            if (this.isFullscreen()){ // 全屏
                exitFullScreen();
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();  // IE11
                }
            }
        }
        // 退出全屏
        function exitFullScreen() {
            let exitFullScreen = document.exitFullScreen ||
                document.mozCancelFullScreen ||
                document.webkitExitFullscreen ||
                document.msExitFullscreen;
            if (exitFullScreen) {
                exitFullScreen.call(document);
            }
        }
        // 判断是否全屏
        function isFullscreen() {
            return document.fullscreenElement ||
                document.msFullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement || false;
        }
    </script>
</body>

</html>

-webkit-代表chrome、safari私有属性
-moz-代表firefox浏览器私有属性
-ms-代表IE浏览器私有属性
-o-代表Opera私有属性