document文档视图尺寸

1.空白文档

 

 

 

document.body是基于body标签  表示整个文档的高度  

doucment.ducumentElement.clientHeight/clientWidth 是基于html标签  表示浏览器的可视区域（不包括控制台，菜单栏，滚动条）

相差的值是body的margin  

设置 

 

 结果：

 

2.添加测试数据

 

 

ducument.body表示文档 没有内容填充 clientHeight offsetHeight都为0  有内容填充  与document.documentElement相差 body的margin

 

 

 

 document.body.offsetHeight === document.documentElement.offsetHeight 

 document.body.offsetWidth === document.documentElement.offsetWidth 

总结：获取浏览器的宽高用document.documentElement.clientHeight/clientWidth属性   获取内容高度用document.body和document.documentElement均可  当margin:0 两者相等

 

*{
margin: 0;
padding: 0;
}

 

 

 

 

 从下往上：此时滚动条处于最左侧和最上侧  srollLeft ，srollTop均为0 

拖动滚动条位置

 

 

document.documentElement.scrollLeft 和 document.documentElement.scrollTop值改变表示距离左侧和顶部的距离 

document.body.scrollTop 和 document.body.scrollLeft 在W3C标准下均为0

 

 document.body.scrollWidth   document.documentElement.scrollWidth   

 document.body.scrollHeight   document.documentElement.scrollHeight   均表示整个文档的宽高    包括不可见的部分  大于clientHeight 或者  clientWidth

 

 

 

 

 把控制台置于下方 改变控制台在浏览器窗口的位置，document.documentElement.clientHeight值发生改变  document.body.clientHeight不变  =>document.documentElement.clientHeight不包含控制台等高度

 

 

 

 document.body.clientWidth   document.documentElement.clientWidth   document.body.offsetWidth   document.documentElement.offsetWidth均发生改变 切步调一致

说明在表现宽度上 body 和 html标签一致 在表现高度上不一致