js offset

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1.offsetParent

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性返回 null。

offsetParent();

function offsetParent(){

    var box = document.getElementById("box");

    parentObj = box.offsetParent;

    console.log(parentObj.tagName+","+parentObj.id);

    parentObj.style.backgroundColor = "orange";

    //1.向上迭代所有父元素直找到CSS定位position

    //Firefox3："DIV"

    //Internet Explorer 7："DIV"

    //Opera 9.51："DIV"

    //Chrome 0.2："DIV"

    //Safari 3："DIV"

    //2.向上迭代所有父元素都没有了CSS定位时,则以BODY定位;

    //Firefox3："BODY";

    //Internet Explorer 7："BODY";

    //Opera 9.51："BODY";

    //Chrome 0.2："BODY";

    //Safari 3："BODY";

}

2.offsetLeft

也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平 偏移量 。从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关。

返回一个像素数值，它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

当offsetParent为body时情况比较特殊:
//在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。
//在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。