个人中心
gpt4 book ai didi

javascript - 全屏 API 的 CSS 对我不起作用

转载 作者：太空宇宙 更新时间：2023-11-03 19:30:56 25 4
gpt4 key购买 nike

我有一个包含 div 的页面，我想在用户单击链接时将其全屏显示。

我试过用 CSS 做这个，但它不起作用 

<html>
    <head>
        <title>DIV with full screen height</title>
        <style>
            #map-canvas {
                height: 590px;
                width:1100px;
                border: 2px solid #326195;
                margin: 5px;
            }
            html:-moz-full-screen #map-canvas {
                height: 100%;
                width:100%;
            }
            html:-webkit-full-screen #map-canvas {
                height: 100%;
                width:100%;
            }
            html:-ms-fullscreen #map-canvas {
                height: 100%;
                width:100%;
            }
        </style>
        <script>
            var element, fullscreenbtn;

            function intializePlayer() {
                element = document.getElementById('map-canvas');
                fullscreenbtn = document.getElementById('fullscreenbtn');
                // Add event listeners
                fullscreenbtn.addEventListener('click', toggleFullScreen, false);
            }
            window.onload = intializePlayer;

            var fullScreen = false;

            function toggleFullScreen() {
                debugger;
                if (!element.fullscreenElement && // alternative standard method
                !element.mozFullScreenElement && !element.webkitFullscreenElement) { // current working methods
                    if (element.requestFullscreen) {
                        element.requestFullscreen();

                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();

                    } else if (element.webkitRequestFullscreen) {
                        element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                } else {
                    if (element.cancelFullScreen) {
                        element.cancelFullScreen();
                    } else if (element.mozCancelFullScreen) {
                        delementocument.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        element.webkitCancelFullScreen();
                    }
                }
            }            
        </script>
    </head>
    <body>
        <a href="#" id="fullscreenbtn" style="z-index: 10;">plein ecran</a>
        <div id="map-canvas"></div>
    </body>
</html>

最佳答案

移除full-screen选择器前面的html，移除full-screen选择器和div之间的space选择器:

:-moz-full-screen#map-canvas {
    height: 100%;
    width:100%;
}

:-webkit-full-screen#map-canvas {
   height: 100%;
   width:100%;
}

:-ms-fullscreen#map-canvas {
   height: 100%;
   width:100%;
}

关于javascript - 全屏 API 的 CSS 对我不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30440251/

25 4 0
文章推荐： html - 如何在分区类中使用边距，使其不影响外部分区类
文章推荐： c# - 如何通过成员(member)/授权在 Azure 上启用 WCF 服务的流传输？
文章推荐： c# - 测试条件然后锁定然后重新测试条件是否好
文章推荐： jquery - 单击主菜单图标后，覆盖网站部分的粘性标题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com