网页里的各种高度和宽度(2) offsetTop、offsetLeft、offsetWidth、offsetHeight

在做页面设计的时候经常遇到要操作页面的各种高度和宽度 , 里面有很多容易混淆的的参数 . 现在参考网上的资料做一次整理 , 希望对不是很清楚的朋友起到一点帮助作用 .

一下内容文字内容引用自 : www.cftea.com , 我对其进行简单编辑 , 配合文字给出了图例 , 希望能更加明了 .

 

假设 obj 为某个 HTML 控件。

offsetTop 、 offsetLeft

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。

具体算法请参见 offsetTop、 offsetLeft 算法 。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。

offsetWidth 、 offsetHeight

obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。具体算法请参见 offsetWidth、 offsetHeight 算法 。

obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。

示例图 :

 

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释， position 变一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。具体算法请参见 offsetParent 算法 。

这里提供获取 HTML 元素当前页面坐标的一个方法 :

    function GetSite(id){

        var obj = (typeof (id)=="string" )?document.getElementById(id):id;

        if (!obj)return undefined;

        var x =0 ,y =0;

        while (obj){

            y += obj.offsetTop;

            x += obj.offsetLeft;

            obj = obj.offsetParent ;

        }

        return {x:x,y:y};

    }

以上属性在 FireFox 中也有效。

另外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body ， document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的）， 点击这里 查看不同点。