Js中 关于top、clientTop、scrollTop、offsetTop的用法

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;