JS获取body的高度

1、documentbodyclientWidth;//网页可见区域宽

2、documentbodyclientHeight;//网页可见区域高

3、documentbodyoffsetWidth;//网页可见区域宽(包括边线的宽)

4、documentbodyoffsetHeight;//网页可见区域高(包括边线的高)

5、documentbodyscrollWidth;//网页正文全文宽

6、windowscreenavailHeight;//屏幕可用工作区高度

7、windowscreenavailWidth;//屏幕可用工作区宽度

8、alert($(documentbody)outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

9、alert($(documentbody)width());//浏览器时下窗口文档body的高度

扩展资料：

1、alert($(window)height()); //浏览器时下窗口可视区域高度

2、alert($(document)height()); //浏览器时下窗口文档的高度

3、alert($(documentbody)height());//浏览器时下窗口文档body的高度

4、alert($(documentbody)outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin

5、alert($(window)width()); //浏览器时下窗口可视区域宽度

6、alert($(document)width());//浏览器时下窗口文档对于象宽度

7、alert($(document)scrollTop()); //获取滚动条到顶部的垂直高度

8、alert($(document)scrollLeft()); //获取滚动条到左边的垂直宽度

网页可见区域宽：documentbodyclientWidth

网页可见区域高：documentbodyclientHeight

网页可见区域宽：documentbodyoffsetWidth (包括边线的宽)

网页可见区域高：documentbodyoffsetHeight (包括边线的宽)

网页正文全文宽：documentbodyscrollWidth

网页正文全文高：documentbodyscrollHeight

网页被卷去的高：documentbodyscrollTop

网页被卷去的左：documentbodyscrollLeft

网页正文部分上：windowscreenTop

网页正文部分左：windowscreenLeft

屏幕分辨率的高：windowscreenheight

屏幕分辨率的宽：windowscreenwidth

屏幕可用工作区高度：windowscreenavailHeight

屏幕可用工作区宽度：windowscreenavailWidth

你所指的应该是网页所见区域高，即documentbodyclientHeight

function autodivheight() { //函数：获取尺寸

    //获取浏览器窗口高度

    var winHeight = 0;

    if (windowinnerHeight) {

        winHeight = windowinnerHeight;

    } else if ((documentbody) && (documentbodyclientHeight)) {

        winHeight = documentbodyclientHeight;

    }

    //通过深入Document内部对body进行检测，获取浏览器窗口高度

    if (documentdocumentElement && documentdocumentElementclientHeight) {

        winHeight = documentdocumentElementclientHeight;

    }

    //DIV高度为浏览器窗口的高度

    documentgetElementById("login_body")styleheight = winHeight + "px";

}

//浏览器窗口变化时

windowonresize = function () {

    autodivheight(); //浏览器窗口发生变化时同时变化DIV高度

}

//浏览器重新加载时

windowonload = function () {

    autodivheight(); //浏览器窗口发生变化时同时变化DIV高度

}

canvaswidth获取的是写在标签属性中的宽度值，eg :<canvas width="800" height="600"></canvas>

这时我们获取的canvas的宽度值是800px;但是如果canvas标签没有设置宽高属性，而是写在css样式表，或者style标签中，canvaswidth获取的是canvas的默认宽（canvas默认宽是300px,默认高是150px）

windowdocumentbodyclientHeight就可以

windowscreenavailWidth 返回当前屏幕宽度(空白空间)

windowscreenavailHeight 返回当前屏幕高度(空白空间)

windowscreenwidth 返回当前屏幕宽度(分辨率值)

windowscreenheight 返回当前屏幕高度(分辨率值)

windowdocumentbodyoffsetHeight; 返回当前网页高度

windowdocumentbodyoffsetWidth; 返回当前网页宽度

我们这里说说四种浏览器对 documentbody 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight

大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

=======================================================================

clientHeight与offsetHeight的区别

许多文章已经介绍了clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？

1 clientHeight和offsetHeight的值由什么决定？

假如我们有以下的DIV，主要显示的文字为"This is the main body of DIV"。

如上图所示，clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；至于CSS中的margin值，则不会影响clientHeight和offsetHeight的值。

2 CSS中的Height值对clientHeight和offsetHeight有什么影响？

首先，我们看一下CSS中Height定义的是什么的高度。如在本文最后部分“APPENDIX示例代码”（注：以下称为“示例代码”）中，innerDIVClass的Height值设定为50px，在IE下计算出来的值如下所示。也就是说，在IE里面，CSS中的Height值定义了DIV包括padding在内的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定义的DIV实际内容的高度，padding并没有包括在这个值里面(70 = 50 + 10 2)。

in IE:

innerDivclientHeight: 46

innerDivoffsetHeight: 50

outerDivclientHeight: 0

outerDivoffsetHeight: 264

in Firfox:

innerDivclientHeight: 70

innerDivoffsetHeight: 74

outerDivclientHeight: 348

outerDivoffsetHeight: 362

在上面的示例中，也许你会很奇怪，为什么在IE里面outerDivclientHeight的值为0。那是因为示例代码中，没有定义outerDIVClass的Height值，这时，在IE里面，则clientHeight的值是无法计算的。同样，在示例代码中，如果将innerDIVClass中的Height值去年，则innerDIVclientHeight的值也为0。(注：在Firefox下不存在这种情况)。

如果CSS中Height值小于DIV要显示内容的高度的时候呢（当CSS中没有定义overflow的行为时）？在IE里面，整个clientHeight（或者offsetHeight）的值并没有影响，DIV会自动被撑大；而在Firefox里面，DIV是不会被撑开的。如在示例代码中，将innerDivClass的Height值设为0，则计算结果如下所示。IE里面的DIV被撑开，其clientHeight值等于内容的高度与padding2的和；而Firefox里面，文字将溢出DIV的边界，其clientHeight值正好是padding值的两倍。

In IE:

innerDivclientHeight: 38

innerDivoffsetHeight: 42

outerDivclientHeight: 0

outerDivoffsetHeight: 256

In Firefox:

innerDivclientHeight: 20

innerDivoffsetHeight: 24

outerDivclientHeight: 298

outerDivoffsetHeight: 312

如果是body不需要勇ID的形式来获取的：

<script type="text/javascript"> 

var     s   =   " ";

documentdocumentElementscrollTop 就是滚动条距离顶部的位置（可变）

documentdocumentElementscrollLef 指滚动条距离左边的位置（可变）

s   +=   "\r\n<br>网页可见区域宽： "+   documentbodyclientWidth; 

s   +=   "\r\n<br>网页可见区域高： "+   documentbodyclientHeight; 

s   +=   "\r\n<br>网页可见区域宽： "+   documentbodyoffsetWidth     + "   (包括边线的宽) "; 

s   +=   "\r\n<br>网页可见区域高： "+   documentbodyoffsetHeight   + "   (包括边线的宽) "; 

s   +=   "\r\n<br>网页正文全文宽： "+   documentbodyscrollWidth; 

s   +=   "\r\n<br>网页正文全文高： "+   documentbodyscrollHeight; 

s   +=   "\r\n<br>网页被卷去的高： "+   documentbodyscrollTop; 

s   +=   "\r\n<br>网页被卷去的左： "+   documentbodyscrollLeft; 

s   +=   "\r\n<br>网页正文部分上： "+   windowscreenTop; 

s   +=   "\r\n<br>网页正文部分左： "+   windowscreenLeft; 

s   +=   "\r\n<br>屏幕分辨率的高： "+   windowscreenheight; 

s   +=   "\r\n<br>屏幕分辨率的宽： "+   windowscreenwidth; 

s   +=   "\r\n<br>屏幕可用工作区高度： "+   windowscreenavailHeight+" （去掉状态栏）"; 

s   +=   "\r\n<br>屏幕可用工作区宽度： "+   windowscreenavailWidth; 

//alert(s);

documentwrite(s);

</script>

IE中： 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

FireFox中： 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

Opera中： 

documentbodyclientWidth ==> 可见区域宽度 

documentbodyclientHeight ==> 可见区域高度 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

没有定义W3C的标准，则 

IE为： 

documentdocumentElementclientWidth ==> 0 

documentdocumentElementclientHeight ==> 0 

FireFox为： 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

Opera为： 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

网页可见区域宽： documentbodyclientWidth 

网页可见区域高： documentbodyclientHeight 

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽) 

网页可见区域高： documentbodyoffsetHeight (包括边线的高) 

网页正文全文宽： documentbodyscrollWidth 

网页正文全文高： documentbodyscrollHeight 

网页被卷去的高： documentbodyscrollTop 

网页被卷去的左： documentbodyscrollLeft 

网页正文部分上： windowscreenTop 

网页正文部分左： windowscreenLeft 

屏幕分辨率的高： windowscreenheight 

屏幕分辨率的宽： windowscreenwidth 

屏幕可用工作区高度： windowscreenavailHeight 

屏幕可用工作区宽度： windowscreenavailWidth 

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 

scrollWidth:获取对象的滚动宽度 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

eventclientX 相对文档的水平座标 

eventclientY 相对文档的垂直座标 

eventoffsetX 相对容器的水平坐标 

eventoffsetY 相对容器的垂直坐标 

documentdocumentElementscrollTop 垂直方向滚动的值 

eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量

示例：

var winWidth = 0; 

var winHeight = 0; 

function findDimensions() //函数：获取尺寸 

{ 

    //获取窗口宽度 

    if (windowinnerWidth) 

        winWidth = windowinnerWidth; 

    else if ((documentbody) && (documentbodyclientWidth)) 

        winWidth = documentbodyclientWidth; 

    //获取窗口高度 

    if (windowinnerHeight) 

        winHeight = windowinnerHeight; 

    else if ((documentbody) && (documentbodyclientHeight)) 

        winHeight = documentbodyclientHeight; 

    //通过深入Document内部对body进行检测，获取窗口大小 

    if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth) 

    { 

        winHeight = documentdocumentElementclientHeight; 

        winWidth = documentdocumentElementclientWidth; 

    } 

    //结果输出至两个文本框 

    documentform1availHeightvalue= winHeight; 

    documentform1availWidthvalue= winWidth; 

} 

findDimensions(); 

//调用函数，获取数值 

windowonresize=findDimensions;

要在js中获得浏览器的高度可以参考以下步骤(具体代码见最后）：

1、outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。

2、outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。

3、innerheight 返回窗口的文档显示区的高度。

4、innerwidth 返回窗口的文档显示区的宽度。

补充：

在浏览器兼容方面：

1、所有主流浏览器都支持 outerWidth 和 outerHeight 属性。

注意：IE 8 及更早 IE 版本不支持该属性。

2、所有主流浏览器都支持 innerWidth 和 innerHeight 属性。

注意：IE 8 及更早 IE版本不支持这两个属性。

获取代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"

<head>

<title>请调整浏览器窗口</title> <meta >

以上就是关于JS获取body的高度全部的内容，包括:JS获取body的高度、JS如何获取网页除了工具栏以外的高度、js获取当前文档视口高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！