将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＆＃39;笔记本电脑，但（当然）在我的外接显示器上还不够大。

所以我的问题是......如何更改这个小代码，以便当用户点击按钮时，它将在640 * 360和当前用户的最大屏幕尺寸之间切换？ （我不是指全屏，而是最大浏览器尺寸）。

屏幕

非常感谢你 小号_

Answer 1

通过使用jquery $（window）.height（）可以获得高度，使用$（window）.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>

注意如果您不想全屏显示，可以更改为$（window）.height（） - 50; $（窗口）.WIDTH（） - 50;