BOM的各种高度、位置

BOM

1、window

window.screenLeft === window.screenX;    // 获取浏览器窗口相对于屏幕的X坐标
window.screenTop  === window.screenY;    // 获取浏览器窗口相对于屏幕的Y坐标
window.innerWidth;                       // 设置和获取浏览器窗口的文档区域宽度(不含滚动条)
window.innerHeight;                      // 设置和获取浏览器窗口的文档区域高度(不含滚动条和工具栏)
window.outerWidth;                       // 设置和获取浏览器窗口的宽度(含滚动条)
window.outerHeight;                      // 设置和获取浏览器窗口的高度(含滚动条和工具栏)
window.pageXOffset;                      // 设置和获取滚动条滚动的X距离
window.pageYOffset;                      // 设置和获取滚动条滚动的Y距离
screen.availWidth  === screen.width;     // 屏幕的宽度
screen.availHeight === screen.height;   // 屏幕的高度

2、document.body

document.body.clientWidth  === document.body.offsetWidth;       // body的宽度,可看盒模型
document.body.clientHeight === document.body.offsetHeight;      // body的高度,可看盒模型
document.body.scrollWidth;              // 文档的完整宽度,含滚动条滚动是的未见区域
document.body.scrollHeight;             // 文档的完整高度,含滚动条滚动是的未见区域
document.body.scrollLeft  === window.pageXOffset;      // 设置和获取滚动条滚动的X距离(此方法设置更有效)
document.body.scrollTop === window.pageYOffset;      // 设置获取滚动条滚动的Y距离(此方法设置更有效)

3、div

div.offsetWidth;                       // width + padding + border
div.offsetHeight;                      // height + padding + border
div.clientWidth === div.scrollWidth;   // width + padding
div.clientHeight === div.scrollHeight; // height + padding
div.clientTop;                         // border-top
div.clientLeft;                        // border-left
div.offsetLeft;                        // div到浏览器左端距离(不含自身border和padding)
div.offsetTop;                         // div到浏览器顶端距离(不含自身border和padding)

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器