1. 前言

本文主講內容為：getBoundingClientRect()函式說明以及在原生JS中和Vue環境下如何使用

2. getBoundingClientRect函式

getBoundingClientRect 函式使用在dom元素中

Element.getBoundingClientRect() 方法返回一個DOMRect物件，其中包含了盒子的大小及其相對於瀏覽器視窗的位置。

{
    width: 1000
    height: 148
    left: 200
    right: 1200
    top: 153
    bottom: 301
    x: 200
    y: 153
}
 

如果是標準盒子模型，元素的尺寸等於width（或者height】 + padding + border-width的總和。如果設定了box-sizing: border-box;屬性，則元素的的尺寸等於 width/height。

圖片中展示了返回值所表示的內容

3. 原生使用方法

JS中使用比較簡單，獲取到dom元素，然後直接呼叫getBoundingClientRect即可

document.getElementById("myId").getBoundingClientRect()

上面的程式碼執行效果如下

4. Vue中使用

在vue中我們有兩種使用方式，$refs 和 event.target

4.1 使用 $refs 獲取到dom後呼叫

直接看程式碼

<template>
    <div>
        <!-- html 建立10行資料-->
        <div v-for="i in 10">
            <p :ref="'p_' + i">這是第{{i}}行</p>
        </div>
    </div>
</template>

<script>

    export default{
        mounted() {
            for (let i = 1; i < 11; i++) {
                let [div] = this.$refs['p_'+1]  // 特別注意這一行
                console.log("-"+i+"-",div.getBoundingClientRect())
            }
        }
    }
</script>

 

這是執行結果

特別說明
我們平時使用 $refs 時都是把值直接賦值給裡一個變數，其實 this.$refs 返回的是一個數組

4.2 解決 getBoundingClientRect is not a function

就是上面的特別說明中的問題引起的， 我們只需要把 this.$refs 獲取的值賦值給一個數組即可,也可以複製給一個普通變數， 呼叫函式的時候用

div[0].getBoundingClientRect()

4.3 使用 event.target 呼叫函式