<html>
<head>
</head>
<body style="height:400px">
<div id="div1">12312</div>
<script type="text/javascript">
documentgetElementById("div1")styleheight=documentbodystyleheight;
alert(documentgetElementById("div1")styleheight);
//如果body，没有设置样式，这个高度就为空
documentgetElementById("div1")styleheight=documentbodyclientHeight
alert(documentgetElementById("div1")styleheight);
//如果设置了样式，offsetHeight就等于样式的height否则等于clientHeight
documentgetElementById("div1")styleheight=documentbodyoffsetHeight
alert(documentgetElementById("div1")styleheight);
</script>
</body>
</html>
移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用pc端那样用分页码的形式，但是更多的确实滑动滚动条到内容最后，加载更多内容出来。一般引入了三方的前端框架和插件，基本都会有此功能。偶尔会需要采用原生js实现，故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。
需要三个高度：
scrollHeight（文档内容实际高度， 包括超出视窗的溢出部分 ）、
scrollTop（滚动条滚动距离）、
clientHeight（窗口可视范围高度）。
当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。
下面附上三者之间的关系：
JQuery 获取三个高度 和 原生获取三个高度的方式：
PHP是无法获取屏幕的高度和宽度的，你可以用JS来获取
Javascript:
网页可见区域宽： documentbodyclientWidth
网页可见区域高：
documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth
(包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽：
documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高：
documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上：
windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高：
windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度：
windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
JQuery:
$(document)ready(function(){alert($(window)height()); //浏览器当前窗口可视区域高度
alert($(document)height()); //浏览器当前窗口文档的高度
alert($(documentbody)height());//浏览器当前窗口文档body的高度
alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window)width()); //浏览器当前窗口可视区域宽度
alert($(document)width());//浏览器当前窗口文档对象宽度
alert($(documentbody)width());//浏览器当前窗口文档body的宽度
alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})
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
精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
实现代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
">
function wHeight(){
var _sh=Mathmax(documentbodyscrollHeight,documentdocumentElementscrollHeight);
var _ch=Mathmax(documentbodyclientHeight,documentdocumentElementclientHeight);
return Mathmax(_sh,_ch);
}
我一般用这个函数
html 最好加上<!doctype html>
在实现手机端分页加载问题的时候 滑动完第一页无法加载第二页，但pc上却没问题；
首先 -- documentaddEventListener('scroll', thisscrollHandle, false); 里的scroll 改成 touchmove，改完后 你在手机上滑动屏幕就可以触发绑定的方法了。
其次 -- 如果改成了touchmove还是不可以 看看是不是 documentdocumentElementscrollTop 这个出的问题：这个有兼容性问题在有的浏览器下会一直获取的是0 这样的话就无法触发 thisloadData(); 请求数据的这个方法 所以就无法加载第二页；
注：以上两步是我处理这个bug的关键
以下这篇文章 对 documentbodyscrollHeight 等 兼容性解释的很好很权
>
C#web view2htmldocument属性webView 自适应高度 documentbody 属性
前段时间开发遇到webView 高度自适应问题，用最初的方法无效，找了些资料，记录下。
1、若网页中含有< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
以上就是关于JS获取HTML页面的BODY的高度全部的内容，包括:JS获取HTML页面的BODY的高度、scrollHeight,clientHeight,scrollTop明晰、PHP怎么获取屏幕的宽度与高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）