JavaScript/JQuery 宽高的理解和应用

js相关宽高介绍

window对象和document对象的介绍

window对象

1. 表示浏览器中打开的窗口。
2. 可以省略。

document对象

1. 是window对象的一部分。
2. window对象去掉浏览器上部的菜单栏。
3. HTML文档成为 document 的对象。

window对象和document对象的location属性

window.location：该窗口中当前显示文档的URL。
document.location：同上。document.location====window.location。

与 window对象相关的宽高：

以下四种兼容 IE9+ 浏览器。

window.innerWidth：可视页面宽度。
window.innerHeight：除去浏览器顶部菜单栏后的高度（可视网页的高度）。
window.outerWidth：整个浏览器的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。
window.outerHeight：整个浏览器的高度（包括浏览器顶部菜单栏）。

window对象的 screen属性

window.screen：包含有关用户屏幕的信息。

screen属性兼容所有浏览器，注意全部小写。

以下四种永远不变。

window.screen.height：整个屏幕的高度。
window.screen.width：整个屏幕的宽度。
window.screen.availHeight：可利用的高度（不包括系统带的任务栏）。
window.screen.availWidth：可利用的宽度。

screenTop：浏览器到屏幕顶部的距离。
screenLeft：浏览器到屏幕左侧的距离。

与 document 相关的宽高：

document对象中与 client 相关的宽高

document.body.clientWidth：元素可视部分的宽度（padding+content）。
document.body.clientHeight：元素可视部分的高度（padding+content）。

如果没有滚动条，即为元素设定的高度和宽度。

如果出现滚动条，滚动条会遮盖元素的宽度和高度，则该属性为其本来的宽高减去滚动条的宽高。

document.body.clientTop：元素周围边框的厚度。
document.body.clientLeft：元素周围边框的厚度。

如果不指定一个边框或者不定位该元素，其值为0。

document对象中与 offset 相关的宽高

document.body.offsetWidth：元素水平 border+padding+content
document.body.offsetHeight：元素垂直 border+padding+content

和其内部内容是否超出元素大小无关，和本来设定的border以及width和height有关。

document.body.offsetTop：
document.body.offsetLeft

offsetParent

1. 如果当前元素的父元素没有使用 position 属性，则 offsetParent 为 body。
2. 如果当前元素的父元素有使用 position 属性，则 offsetParent 为最近的父元素。
3. 浏览器兼容问题：
   3.1 在 IE6/7 中
   offsetLeft = (offsetParent的padding-left)+(当前元素的margin-left)。
   3.2 在IE8/9/10及Chrome 中
   offsetLeft = (offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)。
   3.3 在FireFox 中
   offsetLeft = (offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)。

document对象中与 scroll 相关的宽高

document.body.scrollWidth：
document.body.scrollHeight：

谷歌浏览器中的表现：

1. 给定宽高小于浏览器宽高时，其值为浏览器宽高。
2. 给定宽高大于浏览器宽高且内容小于浏览器宽高，其值为给定宽高+padding+border+margin。
3. 给定宽高大于浏览器宽高且内容小于浏览器宽高，其值为内容宽高+padding+border+margin。

在某div中scrollWidth和scrollHeight：
无滚动轴情况：scrollWidth=clientWidth=style.width+style.padding2。
有滚动轴情况：
scrollWidth=实际内容宽度+padding2。

document.body.scrollTop
document.body.scrollLeft

可读写，当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。

obj.style.width和obj.style.height
obj.style.width
obj.style.height

可读写，等于css中width和height属性。
对于一个dom元素，其style属性返回一个对象。

documentElement和body的关系

document>documentElement(html)>body
获取可视区域的宽高：
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

Event对象的各种坐标

clientX，clientY

相对于浏览器可视区左上角(0,0)的坐标。

screenX，screenY

相对于设备屏幕左上角(0,0)的坐标。

offsetX，offsetY

相对于事件源左上角(0,0)的坐标。

pageX，pageY

相对于整个网页左上角(0,0)的坐标。

X，Y

本是IE属性，相对于用CSS动态定位的最内层包容元素。

js各种宽高的应用

可视区域加载

获取可视区域的宽高：
var areaHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

元素到浏览器可视窗口左上角(0,0)的距离：
var elementHeight = element.getBoundingClientRect().top||.right||.bottom||.left;

if()

网页滚动到底部或者顶部的加载

判断滚动轴滚动到底部或者顶部：

获取可视区域的宽高：
var areaHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

获取已滚动的宽高：
var scrollTop = document.body.scrollTop;

获取网页总高度：
var wholeHeight = document.body.scrollHeight;

if(areaHeight+scrollTop>=wholeHeight)→到达浏览器底部。
if(scrollTop==0)→到达浏览器顶部。

div滚动到底部的加载

var wholeHeight = element.scrollHeight;
var scrollTop = element.scrollTop;
var divHeight = element.clientHeight;

if(scrollTop+divHeight>=wholeHeight)→div滚动到底部了。
if(scrollTop==0)→div滚动到顶部了。

注意以下element.clientHeight和element.style.height的区别：
element.style.height需要显示的定义元素的style属性才能获取。
element.clientHeight可以直接获取元素的高度。

jq相关宽高介绍

内容宽高：

.width()
.height()

注意：
window和document的只可读不可写。
普通元素可读写。

网页可视区域：
$(window).width()/.height();
网页内容总宽高：
$(document).width()/.height()

.width()和css(“width”)的区别：
.width()返回结果无单位。
css(“width”)返回结果有单位。
高度同理。

内容+padding宽高

.innerWidth()
.innerHeight()

注意：
window和document的只可读不可写。
更注意的是window/document.width() = window/document.innerWidth()，不推荐使用innerWidth()。
普通元素可读写。

内容+padding+border宽高

.outerWidth(Boolean)
.outerHeight(Boolean)

当括号内为true时，包括margin。

注意：
window和document的只可读不可写。
更注意的是window/document.width() = window/document.outerWidth()，不推荐使用outerWidth()。
普通元素可读写。

其他宽高相关

.scrollLeft()

相对于水平滚动轴左边的距离。

如果滚动轴非常左，或者元素不能被滚动，这个值为0。

.scrollTop()

相对于垂直滚动轴上边的距离。

如果滚动轴非常上，或者元素不能被滚动，这个值为0。

.offset()

.offset().top||.left;

元素距离顶部的距离：
element.offset().top；

相对于document的当前值（相对于body左上角的left和top值）。

.position()

.position().top||.left;
相对于offset parent的当前坐标值（相对于offset parent元素左上角的left和top值）。