一. offset系列
1. offset系列的5个属性
1. offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离
2. 与style.(left/top/width/height)的区别:
1. offset系列的是只读属性,而通过style的方式可以读写 2. offset系列返回的数值类型(结果四舍五入),style返回的是字符串 3. offsetLeft 和 offsetTop 可以返回没有定位的元素的left值和top值,而style不可以
二. scroll系列
1.scroll系列的4个属性
1. scrollHeight :元素中内容的实际高度(没有边框) * 如果内容不足,就是元素的高度 2. scrollWidth: 元素中内容的实际宽度(没有边框) * 如果内容不足,就是元素的宽度 3. scrollTop: onscroll事件发生时,元素向上卷曲出去的距离 4. scrollLeft : onscroll事件发生时,元素向左卷曲出去的距离
2. 兼容问题
(1) 兼容问题
(2) 兼容代码
function getScroll() {
return { left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0, top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0 }; } 使用方法: 1. 取得scrollLeft值: getScroll().left 2. 取得scrollTop值: getScroll().top
三. client系列
1.client系列的4个常用属性(clientTop和clientLeft这里不予介绍)
1. clientWidth : 获取网页可视区域的宽度 2. clientHeight: 获取网页可视区域的高度 3. clientX :获取鼠标事件发生时的应用客户端区域的水平坐标 4. clientY :获取鼠标事件发生时的应用客户端区域的垂直坐标
2. 兼容问题
(1) clientWidth 和 clientHeight的兼容问题
(2) clientWidth 和 clientHeight的兼容代码
function client(){ if(window.innerWidth){ return { "width":window.innerWidth, "height":window.innerHeight }; }else if(document.compatMode === "CSS1Compat"){ return { "width":document.documentElement.clientWidth, "height":document.documentElement.clientHeight }; }else{ return { "width":document.body.clientWidth, "height":document.body.clientHeight }; } } 使用方法: 1. 取得clientWidth的值: client().width 2. 取得clientHeight的值: client().height
(3)clientX 和 clientY的兼容问题
(4)clientX 和 clientY的兼容性代码
四.总结
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: docume