如何在全屏后设置div的大小 [英] How to set size of div after full screen

问题描述

i有一个apear谷歌地图div我想在全屏后设置尺寸当我退出全屏这是我的方法让div完全scree



i有链接（他的文字全屏）和div当我点击这个链接div aprear全屏

我第一次设置div的宽度和高度



这是我的代码

i have div wich apear google map and i want to set size after full screen when i exit full screen this is my methode to make div full scree

i have link (he's text full screen) and div when i click to this link the div aprear in full screen
in the first time i set the width and height for div

this is my code

<script>
       function changeWidth() {
           var e1 = document.getElementById("map-canvas");
           e1.style.width = "100%";
           e1.style.height = "100%";
       }
       //foction plein ecran
       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>

<a href="#" id="fullscreenbtn" style="z-index: 10;" onclick="changeWidth()">Full screen</a>
       <div id="map-canvas">
      </div>

PLZ我需要帮助

plz i need help

推荐答案

你可以使用javascript屏幕对象使你的div全屏。



尝试以下代码



在你的标记中包含jquery

you can make your div fullscreen by using the javascript screen object.

try the following code

include jquery in your markup

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

（ function （）{

（' ＃map-canvas'）。css（' width'， screen .width）;

('#map-canvas').css('width',screen.width);

这篇关于如何在全屏后设置div的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！