2. 客户区大小
客户区大小是只读的，每次访问都要重新计算的。
客户区大小 概念 公式
clientWidth clientWidth 属性是元素内容区宽度加 上左右内边距宽度; clientWidth = content + padding
clientHeight 元素内容区高度加上上下内边距高度 clientHeight = content + padding
最常用到这些属性的情况，就是确定浏览器视口大小的时候(在 IE7 之前的版本中)。如下面的例子所示:
function getViewport(){
// 检查 document.compatMode 属性，以确定浏览器是否运行在混杂模式。
// Safari3.1 之前的版本不支持这个属性，因此就会自动执行 else 语句
if (document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
};
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
}
复制代码
小结
客户区大小: 只读属性；不包括滚动条和边框，不包括外边距。
3. 滚动大小
概念
scrollHeight 在没有滚动条的情况下，元素内容的总高度。
scrollWidth 在没有滚动条的情况下，元素内容的总宽度。
scrollLeft 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小。
scrollLeft 和 scrollTop属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位 置。在元素尚未被滚动时，这两个属性的值都等于 0。如果元素被垂直滚动了，那么 scrollTop 的值 会大于 0，且表示元素上方不可见内容的像素高度。如果元素被水平滚动了，那么 scrollLeft 的值会 大于 0，且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的，因此将元素的 scrollLeft 和 scrollTop 设置为 0，就可以重置元素的滚动位置。比如:上篇文章文字跑马灯项目中scrollLeft的使用(戳此跳转)
小结
只读属性，不包括滚动条、border。 |
