將html元素大小調整爲最大瀏覽器大小

Question

您好，我有一個小問題。不知道如何問這個問題，但我希望你明白我的意思......

我有一個嵌入視頻的小網站，點擊一個按鈕我可以切換元素的大小

var small=true; 
function toggle() 
{ 
    if(small){ 
     document.getElementById('frame').width = 1000; 
     document.getElementById('frame').height = 600; 
     document.getElementById('change').innerHTML = "Smaller!"; 
     small=false; 
    } 
    else{ 
     document.getElementById('frame').width = 640; 
     document.getElementById('frame').height = 360; 
     document.getElementById('change').innerHTML = "Bigger!"; 
     small=true; 
    } 
} 

較小的尺寸將始終是640 * 360，這也是默認的大小，所以我不想惹那個，但更大的尺寸應根據屏幕大小調整。較大的尺寸現在硬編碼在我的15英寸筆記本電腦上看起來不錯，但（外部）在我的外接顯示器上不夠大。

所以我的問題是......如何改變這個小代碼，所以當用戶點擊按鈕時，它將在640 * 360和當前用戶的最大屏幕尺寸之間切換？ （我不是指全屏，但最大瀏覽器大小）。

屏幕

非常感謝您 S_

Answer 1

通過使用jQuery $（窗口）.height（），你可以得到的高度，並用$（窗口）.width（）你可以得到寬度。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
var small=true; 
<script language="javascript"> 
function toggle() 
{ 
    if(small){ 
     document.getElementById('frame').width = $(window).width(); 
     document.getElementById('frame').height = $(window).height(); 
     document.getElementById('change').innerHTML = "Smaller!"; 
     small=false; 
    } 
    else{ 
     document.getElementById('frame').width = 640; 
     document.getElementById('frame').height = 360; 
     document.getElementById('change').innerHTML = "Bigger!"; 
     small=true; 
    } 
} 
</script> 

注意如果你不想全屏幕，你可以像$改變（窗口）.height（） - 50; $（窗口）.WIDTH（） - 50;