JS或jQuery实现全屏

最新推荐文章于 2024-05-09 09:36:38 发布

BaymaxLily

最新推荐文章于 2024-05-09 09:36:38 发布

阅读量2.6k

点赞数

分类专栏：全屏实现文章标签： javascript basic jquery

本文链接：https://blog.csdn.net/BaymaxLily/article/details/53941457

版权

这篇博客详细介绍了四种不同的方法，通过JavaScript和jQuery来实现网页全屏显示的功能。分别提供了JS的四种不同实现方式，包括纯JS的写法一、写法二、写法三，以及结合jQuery的写法四，每种方法都包含了对应的HTML、CSS和JavaScript代码示例。

摘要由CSDN通过智能技术生成

JS或jQuery实现全屏

写法一

JS

.html

<div class="container"
            <button id="full-screen">全屏</button>
            <button id="exit-fullscreen">退出</button>
</div>

.css

 /* Basic element styles */
        html {
             color: #000;
             background: paleturquoise;
             min-height: 100%;
         }
        /* Structure */
        .container {
            text-align: center;
            width: 500px;
            min-height: 600px;
            background: #fff;
            border: 1px solid #ccc;
            border-top: none;
            margin: 20px auto;
            padding: 20px;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            box-shadow: 1px 1px 10px #000;
            -moz-box-shadow: 1px 1px 10px #000;
            -webkit-box-shadow: 1px 1px 5px #000;
        }
        button{
            margin: 200px auto;
            width: 100px;
            height: 30px;
            background-color: aliceblue;
        }

        /* Fullscreen */
        html:-moz-full-screen {
            background: blue;
        }

        html:-webkit-full-screen {
            background: blue;
        }

        html:-ms-fullscreen {
            background: