JavaScript Window – 浏览器对象模型


浏览器对象模型 (BOM) 
Window 尺寸
浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

在网上搜集到很不错的图片:
常用的如下:
body.clientTop: body的上边框长度(感觉是border-top)
body.clientLeft: body的左边框长度(感觉是border-left)
body.clientHeight: body可视区域的高度(不包括border)
body.style.padding:
body.style.border:

div.style.top:
div.style.Left:
div.style.padding:
div.style.border:该div的边宽
div.style.margin:

div.scrollTop:
div.scrollHeight:
div.scrollWidth:

div.offsetTop:获取物体的上边距的值(最终值)
div.offsetLeft:获取物体的左边距的值(最终值)
div.offsetHeight:针对于物体的盒模型的Height(Height= Height+ border + padding)
div.offsetWidth: 针对于物体的盒模型的Width(width = width + border + padding)

div.clientTop:该物体的上边框长度(感觉是border-top)
div.clientLeft:该物体的左边框长度(感觉是border-left)
div.clientHeight:该物体可视区域的高度(不包括border)
div.clientWidth:该物体可视区域的宽度(不包括border)


Carpe Diem and Do what I like