如何在全屏后设置div的大小 [英] How to set size of div after full screen
本文介绍了如何在全屏后设置div的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
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屋!
查看全文