JavaScript中的宽度和高度

关于winow和document的关系：

window是一个顶层对象，即浏览器的窗口

document表示当前的HTML文档，也是一个对象，而document对象也是window对象的一部分

注意：以下测试均在Firefox

window相关的宽度和高度

innerHeight与outerHeight

通过Firebug的测试，我得到以下特点：

• window.outerHeight与浏览器的窗口的高度有关系
• window.innerHeight与浏览器的窗口的高度和控制台的高度都有关系

innerWidth与outerWidth

>window.outerWidth

1936

>window.innerWidth

1920

所以关系大致如下：

window.screen

window.screen 对象包含有关用户屏幕的信息

• window.screen.availWidth 返回当前屏幕宽度(空白空间)
• window.screen.availHeight 返回当前屏幕高度(空白空间)
• window.screen.width 返回当前屏幕宽度(分辨率值)
• window.screen.height 返回当前屏幕高度(分辨率值)
• window.screenX 当前窗口距离屏幕左边的距离
• window.screenY 当前窗口距离屏幕上边的距离

测试的图片如下：

> window.screen.availWidth
1366
> window.innerWidth
654

> window.screen.height
768
> window.screen.availHeight
728

document相关的宽度和高度

1.client相关的宽高

• document.body.clientWidth 文档的可视部分的宽度(clientWidth=width+padding 不包括滚动条)
• document.body.clientHeight 文档的可视部分的高度(clientHeight=height+padding 不包括滚动条)
• document.body.clientLeft 获取body元素对象的左边框的宽度(与border有关系)
• document.body.clientTop 获取body元素对象的上边框的宽度(与border有关系)

<style type="text/css">    body {        width: 300px;        height: 400px;        background-color: #666;    }</style><script type="text/javascript">    window.onload = function() {        console.log(document.body.clientWidth, document.body.clientHeight);    }</script>

上面的代码输出的就是300, 400

2.与offset相关的宽高

• document.body.offsetWidth 获取body元素对象的宽度，即offsetWidth=width+padding+border，也可以写成offsetWidth=clientWidth+border
• document.body.offsetHeight 获取body元素对象的高度，即offsetHeight=height+padding+border，也可以写成offsetHeight=clientHeight+border
• document.body.offsetTop 获取body元素对象相对于自身的位置，举个例子，当body设置了1px的边距时，此时的document.body.offsetTop 值为 -1
• document.body.offsetLeft 获取body元素对象相对于自身的位置，当body设置了1px的边距时，此时的document.body.offsetLeft 值为 -1

3.与scroll相关的宽高

• document.body.scrollWidth 获取body元素对象内容的实际宽度，即对象的滚动宽度
• document.body.scrollHeight 获取body元素对象内容的实际高度，即对象的滚动高度
• document.body.scrollLeft 获取页面文档向右滚动过的像素数
• document.body.scrollTop 获取页面文档向下滚动过的像素数