【JS】24-- JS各种高度相关

来源：(https://www.cnblogs.com/yulintianxia/p/9385595.html)

https://blog.csdn.net/kelly0721/article/details/103435661

image

Javascript:

IE中：

document.body.clientWidth ==> body对象宽度
document.body.clientHeight ==> body对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

FireFox中：

Opera中：

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

alert(document.body.clientWidth); //网页可见区域宽(body)
alert(document.body.clientHeight); //网页可见区域高(body)
alert(document.body.offsetWidth); //网页可见区域宽(body)，包括border、margin等
alert(document.body.offsetHeight); //网页可见区域宽(body)，包括border、margin等
alert(document.body.scrollWidth); //网页正文全文宽，包括有滚动条时的未见区域
alert(document.body.scrollHeight); //网页正文全文高，包括有滚动条时的未见区域
alert(document.body.scrollTop); //网页被卷去的Top(滚动条)
alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)

alert(window.screenTop); //浏览器距离Top
alert(window.screenLeft); //浏览器距离Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的宽
alert(window.screen.availHeight); //屏幕可用工作区的高
alert(window.screen.availWidth); //屏幕可用工作区的宽

Jquery

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度包括border padding margin

自己验证网上得测试，我使用的是IE11；

计算的是body的宽度和高度,不包括border（重点）

alert(document.body.clientWidth);获取网页的可见区域宽度，会受到屏幕的大小切换而发生变化，在谷歌和火狐上，IE最大是1333（电脑端），在手机调试下，谷歌默认都是964，火狐是按照手机的实际屏幕显示，而且发现火狐浏览器手机调试时，alert失效了。

alert(document.body.clientHeight);获取网页可见区域的高度，会受到屏幕的大小切换而发生变化，根据内容来展示，会包括margin和padding.具体是多少在每个浏览器下面有一些差别。

计算的是body的宽度和高度,包括border（重点）
alert(document.body.offsetWidth);同上类似，不过包括border.

alert(document.body.offsetHeight);同上类似，不过包括border.
计算的是网页网页正文全文宽，包括有滚动条时的未见区域，从滚动条的一侧到另外一侧。(也就是说内容有好宽，好长，就有好宽或好长)；注意不包括border

alert(document.body.scrollWidth);

alert(document.body.scrollHeight);（感觉等价于document.body.clientHeight）

获取滚动条的位置（即距离顶部的距离）；注意有兼容性问题

如果头部申明的DTD的严格模式或是html5模式，注意谷歌，ie，火狐始终为0;

document.body.scrollTop 网页被卷去的Top(滚动条位置)。建议需要做兼容性考虑。（手机端做测试时，经常出问题,建议使用jqery的方法）;

var heightTop = document.documentElement.scrollTop || document.body.scrollTop||

window.pageYOffset;

<pre class="hljs javascript" style="margin-top: 0px; margin-bottom: 0px;">同理
document.body.scrollLeft 网页被卷去的Left(滚动条位置)，兼容性考虑</pre>

var left= document.documentElement.scrollLeft || document.body.scrollLeft||

window.pageXOffset;

screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。（注意firbox没有这个属性， Firefox 浏览器请使用 "window.screenX" and "window.screenY"）

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

window.screen.height，window.screen.width表示屏幕的总高度和宽度，注意包括页面可见区域部分加上工具栏，标题栏这些。（常用于对用户屏幕的获取);

window.screen.availHeight,window.screen.availWidth 获取屏幕的可见区域的高度和宽度（不包括任务栏部分）；

<pre style="margin-top: 0px; margin-bottom: 0px;">注意不包括菜单栏、工具栏以及滚动条等的高度（IE不支持）
window.innerWidth：可视窗口宽度(包括滚动轴宽度)：//IE9+、Chrome、Firefox、Opera 以及 Safari
window.innerHeight：可视窗口高度，不包括浏览器顶部工具栏：//IE9+、Chrome、Firefox、Opera 以及 Safari
注意和 ,window.screen.availWidth 的区别

screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。</pre>

<pre style="margin-top: 0px; margin-bottom: 0px;">client：使用区、客户区。指的是客户区，当然是指浏览器区域。
offset：偏移。指的是目标甲相对目标乙的距离。
scroll：卷轴、卷动。指的是包含滚动条的的属性。
inner：内部。指的是内部部分，不含滚动条。
avail：可用的。可用区域，不含滚动条，易与inner混淆。

window.innerWidth/innerHeight：浏览器可见区域的内宽度、高度（不含浏览器的边框，但包含滚动条）。兼容：ie9/10、chrome、firefox。
window.screen.availWidth/availHeight:屏幕的可用宽度、高度（通常与屏幕的宽度、高度一致）。兼容性：ie6/7/8/9/10、chrome、firfox</pre>

<pre style="margin-top: 0px; margin-bottom: 0px;">window.outerHeight：整个浏览器可用工作区高度（包括所有界面元素，如工具栏、滚动条）</pre>

<pre style="margin-top: 0px; margin-bottom: 0px;">window.outerWidth：整个浏览器可用工作区宽度（包括所有界面元素，如工具栏、滚动条）</pre>

<pre style="margin-top: 0px; margin-bottom: 0px;">
JQuery</pre>

alert($(window).height()); //浏览器当前窗口可视区域高度（谷歌，firefox，IE都支持）；在手机调试上最清楚，firefox和手机屏幕大小是一致，谷歌不是这样子，类似于是网页可见区域高度，但是并不是完全是这样的。可以随着屏幕的大小发生改变

alert($(window).width()); //浏览器当前窗口可视区域宽度,谷歌和火狐，IE的电脑模式一样的展现，但是在手机模式下，谷歌默认是980，经过测试确实是当前窗口的宽度，不随着手机屏幕改变而改变，但是火狐浏览器遵循手机屏幕的大小。

一般不会随着屏幕的改变而改变，除非是样式的改变。

alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度

补充：

$(document)：整个文档
$("body")：body
$(window)：视口（有设doctype的前提下）

1)、页面内容大于视口（浏览器窗口）时：
$(document).height() = $("body").height() > $(window).height();

2)、页面内容小于视口时：
$(document).height() = $(window).height() > $("body").height();

另：
$(window).height()还受页头DOCTYPE的影响，在此默认为有DOCTYPE的前提。

不加true表示不包括外边距，margin，一般试计算具体元素，标签这些，不适用doucument或者screen，注意对隐藏元素一样适用

alert（$(document.body).innerHeight()）//获取匹配元素内部区域高度（包括补白、不包括边框）

alert（$(document.body).innerWidth()）//获取匹配元素内部区域kuandu（包括补白、不包括边框）

alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度包括border padding margin

alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度包括border padding margin

alert($(document).scrollTop()) 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)
alert($(document).scrollLeft() )这是获取水平滚动条的距离

其他补充没有测试

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签