Js中 关于top、clientTop、scrollTop、offsetTop的用法
1、offsetTop/left
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。-——也就是距离其最近的父元素(offsetparent)的上边框的距离
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null。
所以要想获得,某元素距离网页顶部的距离(也就是距离body元素上边框的距离),需要写一个递归函数,循环到根部
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
offsetWidth与clientHeight的区别:
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
clientHeight=内边距+内容
offsetTop 与 style.top 的区别
相同点:返回同一值
不同点:
(1)offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
(2)offsetTop 只读,而 style.top 可读写。
(3)如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
2.scrolltop:滚动高度,也就是被卷入高度
网页可见区域宽: document.body.clientWidth(这是ie7之前的版本,也就是运行混杂模式的ie)|| document.document.clientWidth(一下均同理)
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;(包括了被卷入部分)
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;