Javascript按鈕

所以我有這個JavaScript片有兩個按鈕去全屏和一個退出全屏。我想這樣做，如果我不是全屏按鈕說去全屏幕，當我在全屏幕按鈕說退出全屏幕... 所以基本上，我只需要一個按鈕進入/退出全屏。Javascript按鈕

<html> 
<head> 
<script> 
function launchFullscreen(element) { 
if(element.requestFullScreen) { 
element.requestFullScreen(); 
} else if(element.mozRequestFullScreen) { 
element.mozRequestFullScreen(); 
} else if(element.webkitRequestFullScreen) { 
element.webkitRequestFullScreen(); 
} 
} 

function cancelFullscreen() { 
if(document.cancelFullScreen) { 
document.cancelFullScreen(); 
} else if(document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} else if(document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
} 

</script> 
</head> 
<body> 

<button onclick="launchFullscreen(document.documentElement);">Launch Fullscreen</button> 

<button onclick="cancelFullscreen();">Hide Fullscreen</button> 

</body> 
</html>

來源

2013-05-11 Vadim Zinkov

首先，您需要爲按鈕指定一個ID。

<button id="fsBtn" onclick=launchFullscreen(document.documentElement)>Enter Full Screen</button>

當按鈕被按下，你要改變內部的按鈕的innerHTML值「全屏（）」函數：

document.getElementById("fsBtn").innerHTML = "Exit Full Screen";

你也可以改變一個按鈕的onclick值：

document.getElementById("fsBtn").onclick = cancelFullscreen;

來源

2013-05-11 07:24:39 adamjc

@adamjcSweet這個作品，但是。只有一次。有一個按鈕是我想要的，它說輸入全屏，當我點擊它時，它進入全屏，並說全屏退出，當我點擊它，退出全屏，並不會回到全屏。不過謝謝...生病了，但是如果你知道一個快速解決方案，請告訴我。 – 2013-05-11 08:13:10

在cancelFullscreen函數中，您需要使用類似的代碼，將按鈕innerHTML更改爲「Enter Full Screen」，並將onclick值分配給enterFullscreen函數。 – adamjc 2013-05-11 08:30:16

我添加了....作品+自定義圖片了。 var screenFull = false; var img = new Image（'button'）。src =「.//images/up_full.fw.png」; document.getElementById（'button'）。src =「.//images/up_full.fw.png」; function togle（）{ if（screenFull）{0} {0} {0} {0} cancelFullscreen（）; \t document.getElementById（'button'）。src =「.//images/up_full.fw.png」; screenFull = false; } else { launchFullscreen（document.documentElement）; document.getElementById（'button'）。src =「.//images/down_full.fw.png」; \t screenFull = true; – 2013-05-11 21:52:51

增加號碼至按鈕，只需撥動按鈕例如：

function launchFullscreen(element) { 
    if (element.requestFullScreen) { 
     element.requestFullScreen(); 
    } else if (element.mozRequestFullScreen) { 
     element.mozRequestFullScreen(); 
    } else if (element.webkitRequestFullScreen) { 
     element.webkitRequestFullScreen(); 
    } 
    //hide full screen button 
    this.style.display ='none' 
    //show exit button 
    document.getElementById("btn_cancel_fullscreen").style.display ='inline' 

} 

function cancelFullscreen() { 
    if (document.cancelFullScreen) { 
     document.cancelFullScreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitCancelFullScreen) { 
     document.webkitCancelFullScreen(); 
    } 
    //hide cancel full screen button 
    this.style.display ='none' 
    //show full screen button 
    document.getElementById("btn_fullscreen").style.display ='inline' 
} 
<button id='btn_fullscreen' onclick="launchFullscreen(document....)"> Fullscreen</button> 
<button id='btn_cancel_fullscreen' style='display:none' onclick="cancelFullscreen();">Hide Fullscreen</button>

來源

2013-05-11 07:27:22 Strik3r

回答

相關問題