元素的offsetParent offsetLeft offsetTop属性

offsetParent:指定最近的祖先定位祖先元素,如果没有的话,指向根元素或者整个文档。

offsetLeft, offsetTop:计算子元素相对offsetParent的偏移距离

下面是测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>offsetX</title>
        <style type = "text/css">
        html {
           margin: 20px;
           border:3px solid red;
           padding: 20px;
           
        }
        /*body的边框为橙色*/
        body {
            padding: 20px;
            margin: 20px;
            border: 1px solid orange;
            
            
            
        }
        /*蓝色边框div*/
        #wrapper {
            padding: 20px;
            margin: 0;
            border: 1px solid blue;
            width: 500px;
            
            
            
        }
        /*绿色边框的div*/
        #div1 {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            background: gold;
            margin-bottom: 20px;
            
            
            
        }
        /*嵌套在绿色边框里面的红色边框div*/
        #div1_1 {
            width: 100px;
            height: 100px;
            border: 3px solid green;
            padding: 0;
            margin: 49px;
            background: silver;
            
            
            
            
            
            
        }
        /*黑色边框div,用来显示*/
        #div2 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        #div3 {
            margin: 1000px;
        }
        </style>
        <!--myUtil.js是外部js文件-->
        <script type = "text/javascript" src = "myUtil.js"></script>
        <script type = "text/javascript">
            function test() {
                myUtil.addEvent("div1_1", "mousemove", function(event) { 
                    event = myUtil.getEventObject(event); 
                    var div2 = myUtil.byId("div2"); 
                    div2.innerHTML = "parentNode: " + this.offsetParent.nodeName + "<br /> X: " + this.offsetLeft + " Y: " + this.offsetTop ;
                });
            
                
            }
        </script>
        
    </head>
    <body onload = "test()">
    
    <div id = "wrapper">
    <div id = "div1"><div id = "div1_1"></div></div>
    <div id = "div2"></div>
    </div>
    </body>
</html>

代码运行后的效果:
元素的offsetParent offsetLeft offsetTop属性_第1张图片

最外层红色边框为html元素

第二层橙色边框为body元素

第三层蓝色边框为id为wrapper的div框

金色背景,红色边框是id为div1的div框

银色背景,绿色边框时id为div1_1的div框

黑色边框为id为div2的显示div框

总结来说:

1 当子框(也就是这里的银色div框,id为div1_1)的父元素有定位时(可能是相对定位,或者绝对定位,或者固定定位),那么offsetParent就是这个定位的父元素,而不管这个子框的定位情况(可能定位,也可能没定位)。

2 而当着个子框有定位,而它的父元素没有定位时,分成子框相对定位和绝对定位(固定定位也一样)两种情况:

(1) 子框相对定位时,父元素没有定位,那么offsetParent在火狐中是html元素左上角(虽然代码结果显示的是body元素,但是通过计算发现不是),而在IE8中offsetParent是相对于整个文档左上角(并不是html元素,而是html元素外面空白区域的左上角);

(2) 若子框是绝对定位,父元素没有定位,那么在火狐和IE8中都是相对于整个文档的左上角。

(3) 若子框和父元素都没定位,那么offsetParent在火狐中是html元素,而IE8中offsetParent是整个文档

同时,在火狐和IE8中offsetLeft和offsetTop的计算方式不一样:

在火狐中,offsetLeft,offsetTop是从父元素左上角(是左边框和上边框同padding交界的位置)到子框左上角(左边框和上边框和外边距margin交界的位置)的距离;

在IE8中,offsetLeft,offsetTop是从父元素的左上角(是左边框和上边框同外边距margin交界的位置)到子边框左上角(同火狐)的距离

 

 

源码下载.rar

你可能感兴趣的:(left)