聊聊各种宽宽高高的获取
2017-10-13 本文已影响0人
Primers
所讨论的环境，都是在有DTD条件下的。
首先，理解”window“、“ document.body ”和“ document.documentElement ”。
| window | 它表示浏览器窗口。 大小为边界与边界间包围的范围（含滚动条） |
| body | 是dom中的节点，即<body>。 |
| doctmentElement | 则是dom中的根节点，即<html>。在未进行设置时，与浏览器可见区域同大小（不含滚动条） |
获取浏览器窗口尺寸的方法
（包含滚动条）
- 对于IE 9+、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight- 浏览器窗口边界之间的高度（滚动条于边界内）
window.innerWidth- 浏览器窗口边界之间的宽度（滚动条于边界内）
（不包含滚动条）
- jQ
$(window).height();
$(window).width(); - Js
document.documentElement.clientHeight
document.documentElement.clientWidth
或者（需要在没有设置body尺寸的情况下）
document.body.clientHeight
document.body.clientWidth
Js下有client /offset /scrollHeight(Width)三种尺寸
聊聊他们的区别，为了方便理解，我给它们取个中文名。
- clientHeight - 室内空间尺寸（墙以内的空间）
高度不包括滚动条、margin和边框，但是包括padding。- offsetHeight - 房子尺寸（包括墙的厚度）
可以理解为整体高度，除了外边框，其他都包含。- scrollHeight - 我称他为展开空间，比较不好理解。
一般情况下（没被子元素撑开），最小值就是clientHeight。
当子元素过大而出现滚动条的情况，值为子元素所占高度+padding值。
即相当于子元素会撑开父元素而不是溢出，这种情况下的clientHeight。
另外还有几种Left和Top
- offsetLeft和offsetTop：返回元素的X和Y坐标。offsetParent属性指定这个属性相对的父元素。
- clientLeft和clientTop：没什么用，返回内边距的外边缘和边框的外边缘之间水平距离和垂直距离。
- scrollLeft和scrollTop：是滚动条位置。
jQ下有height ()、innerHeight () 和outHeight ()
- height()：其高度范围是所匹配元素的高度height；
- innerheight()：其高度范围height+padding，相当于Js的clientHeight；
- outerheight()：其高度范围是height+padding+border；
outerheight(true)：其高度范围是height+padding+border+margin；
获取其他种类的宽高
$(window).height(); //浏览器当前窗口可视区域高度
$(document).height(); //浏览器当前窗口文档的高度
$(document.body).height(); //浏览器当前窗口文档body的高度
$(document.body).outerHeight(true);
//浏览器当前窗口文档body的总高度 包括border padding margin
//网页可见区域宽(body)，包括border
document.body.offsetWidth;
document.body.offsetHeight;
//网页正文全文高，包括有滚动条时溢出的不可见区域
document.body.scrollWidth;
document.body.scrollHeight;
//网页被卷去的Top、Left(滚动条)
document.body.scrollTop;
document.body.scrollLeft;
//浏览器距离Top、Left
window.screenTop;
window.screenLeft;
//屏幕分辨率的宽高
window.screen.height;
window.screen.width;
//屏幕可用工作区的宽
window.screen.availHeight;
window.screen.availWidth;
另外这里还有一份详细的实验报告→脚本之家
