HTML DOM 宽度 + 可见窗口高度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1823691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:26:03  来源:igfitidea点击:

HTML DOM width + height of visible window

htmldomheightwidth

提问by Ian Vink

How do I get the current height and width of the available space in the browser as it is open.

如何在浏览器打开时获取可用空间的当前高度和宽度。

I don't want the height of the total document, just what's visible on the screen.

我不想要整个文档的高度,只想要屏幕上可见的高度。

回答by RageZ

You can take a look at this blog postto see the method.

您可以查看此博客文章以了解该方法。

and in short in give that code

简而言之,给出那个代码

function alertSize() {
    var myWidth = 0, myHeight = 0;
    if(typeof(window.innerWidth) == 'number') {
        // Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } 
    else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        // IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } 
    else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
        // IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }

    window.alert( 'Width = ' + myWidth );
    window.alert( 'Height = ' + myHeight );
}

also have to be noted that most of js framework (jquery, ext, prototype) would provide a function for doing that (IMHO).

还必须注意的是,大多数 js 框架(jquery、ext、prototype)都会提供这样做的功能(恕我直言)。

in jQuery:

在 jQuery 中:

$(window).width();
$(window).height();

回答by Kent Morrison

Use the window objects property, inner height/width, to find the dimensions of just the content on the webpage. This includes the scroll bars. Here is a visual explanation -> http://goo.gl/L0cBLA.

使用窗口对象属性(内部高度/宽度)来查找网页上内容的尺寸。这包括滚动条。这是一个直观的解释 - > http://goo.gl/L0cBLA

Height:

高度:

window.innerHeight

Width:

宽度:

window.innerWidth

回答by Yuval A.

<html id="THE_HTML">
<!-- all your stuff... -->
</html>

then:

然后:

document.getElementById('THE_HTML').clientHeight;

Tested and working under IE8 and FF3.6...

在 IE8 和 FF3.6 下测试和工作...