offsetHeight、clientHeight、scrollHeight

offset client scroll

今天简单介绍介绍一下

+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* scrollHeight: 获取对象的滚动高度。 
* scrollLeft:元素的横向滚动条移动的距离 可以读取 可以修改
* scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 可以读取 可以修改
* scrollWidth:获取对象的滚动宽度 
* offsetHeight:获取对象相对于版面或由父坐标，如果内容没有超出,相当于clientHeight
* offsetParent 属性指定的父坐标的高度 
* offsetLeft:返回元素与offsetParent的横向距离，找到元素的左偏移量，偏移量的参考对象是offsetParent的值
* offsetParent: 返回距离元素最近设置position，非static样式的元素节点，没有的话，返回body节点。可以读取,可以修改
* offsetTop 属性指定的父坐标的计算顶端位置 
* innerWidth ：浏览器窗口宽度 (只读)
* innerHeight ：浏览器窗口高度 (只读)
* offsetWidth : 等于 width + padding + border (只读)
* offsetHeight :等于 height + padding + border (只读)
* clientWidth : 等于 width + padding (只读)
* clientHeight : 等于 height + padding (只读)
1
2
3
4
5
6
* event.clientX 相对文档的水平座标 
* event.clientY 相对文档的垂直座标 
* event.offsetX 相对容器的水平坐标 
* event.offsetY 相对容器的垂直坐标 
* document.documentElement.scrollTop 垂直方向滚动的值 
* event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
1
2
3
4
5
6
7
8
9
10
11
12
13
* 页可见区域宽： document.body.clientWidth;
* 网页可见区域高： document.body.clientHeight;
* 网页可见区域宽： document.body.offsetWidth   （包含边线的宽）;
* 网页可见区域高： document.body.offsetHeight （包含边线的宽）;
* 网页正文全文宽： document.body.scrollWidth;
* 网页正文全文高： document.body.scrollHeight;
* 网页被卷去的高： document.body.scrollTop;
* 网页被卷去的左： document.body.scrollLeft;
* 网页正文项目组上： window.screenTop;
* 网页正文项目组左： window.screenLeft;
* 屏幕辨别率的高： window.screen.height;
* 屏幕辨别率的宽： window.screen.width;
* 屏幕可用工作区高度： window.screen.availHeight;

the end