js获取元素占位之offsetLeft、offsetTop用法

女爷i 2023-07-19 12:07 9阅读 0赞

# offsetLeft offsetTop #

**offsetLeft：** 到定位父级左边界的间距。  
**offsetTop：** 到定位父级上边界的间距。

### 规则 ###

每一个标签对象，都有一个属性，叫 offsetParent ，表示这个标签的定位父级对象是谁。  
我们先设定好标签的样式，下面规则中的demo都是在带有该样式的基础上更改或执行的：

*{ 
        margin: 0;
        padding: 0;
    }
    body{ 
        padding: 50px;
    }
    .div1{ 
        margin-left: 100px;
        position: fixed;
    }
    .div2{ 
        position: fixed;
    }

##### 1. 标签本身，没有定位属性，定位父级对象 是 body #####

此时是这个标签到body的间距 
    不管是body的padding，还是标签的margin，都是到body的间距
    如果有父级，计算的也是当前标签到 body 的总间距

###### 实例（无父级） ######

<div class="div2">我是div</div>
    
    <script>
        var oDiv = document.querySelector('.div2');
        // 定位父级是 body
        console.dir(oDiv);
    </script>

###### 实例（有父级） ######

<div class="div1">
        <div class="div2">我是div</div>
    </div>
    
    <script>
        var oDiv = document.querySelector('.div2');
        // 定位父级仍然是 body
        console.dir(oDiv);
    </script>

##### 2. 标签本身有定位，要看定位父级对象是谁 #####

position: relative;    定位父级仍然是 body
    position: absolute;    要看具体的定位是谁
    position: fixed;       定位父级是 null 指的是 视窗窗口
    表示的仍然是到定位父级的间距，只是定位父级有可能不同

###### 实例1（标签本身position: relative + 父级无定位） ######

此时要更改样式：

.div1{ 
        margin-left: 100px;
    }
    .div2{ 
        position: relative;
    }

###### 实例2.1（标签本身position: absolute + 父级无定位） ######

更改样式：

.div1{ 
        margin-left: 100px;
    }
    .div2{ 
        position: absolute;
    }

###### 实例2.2（标签本身position: absolute + 父级position: relative） ######

更改样式：

.div1{ 
        margin-left: 100px;
        position: relative;
    }
    .div2{ 
        position: absolute;
    }

<div class="div1">
        <div class="div2">我是div</div>
    </div>
    
    <script>
        var oDiv = document.querySelector('.div2');
        // 定位父级变成了 div.div1
        console.dir(oDiv);
    </script>

###### 实例3（标签本身position: fixed + 不论父级有无定位） ######

更改样式：

.div1{ 
        margin-left: 100px;
        /* 不论有没有这个定位属性 */
        position: relative;
    }
    .div2{ 
        position: fixed;
    }

<div class="div1">
        <div class="div2">我是div</div>
    </div>
    
    <script>
        var oDiv = document.querySelector('.div2');
        // 定位父级都是视窗窗口，值为 null
        console.dir(oDiv);
    </script>

##### 3. 标签本身没有定位，父级有定位属性 #####

此时定位对象父级是 带有定位属性的父级标签
    表示的是到这个父级标签的间距

###### 实例 ######

更改样式：

.div1{ 
        margin-left: 100px;
        /* 不论是相对定位还是绝对定位等等 */
        position: relative;
    }

<div class="div1">
        <div class="div2">我是div</div>
    </div>
    
    <script>
        var oDiv = document.querySelector('.div2');
        // 定位父级是 div.div1
        console.dir(oDiv);
    </script>

### 总结 ###

**offsetLeft offsetTop 情况很复杂  
需要先确定 offsetParent 定位父级对象标签  
获取的数据，就是当前标签，到父级定位标签的总间距**