如何獲取鼠標(biāo)在盒子中的位置？

更新時(shí)間:2022-01-07 來(lái)源:黑馬程序員瀏覽量:

如何獲取鼠標(biāo)在盒子中的位置？在解決這個(gè)問(wèn)題之前，我們先來(lái)了解下offset系列屬性。

offset的含義是偏移量，使用offset的相關(guān)屬性可以動(dòng)態(tài)地獲取該元素的位置、大小等。相關(guān)屬性如下表所示。

offset系列屬性

屬性	說(shuō)明
offsetLeft	返回元素相對(duì)其帶有定位的父元素左邊框的偏移
offsetTop	返回元素相對(duì)其帶有定位的父元素上方的偏移
offsetWidth	返回自身的寬度(包括padding、邊框和內(nèi)容區(qū)域的寬度)。注意返回?cái)?shù)值不帶單位
offsetHeight	返回自身的高度(包括padding、邊框和內(nèi)容區(qū)域的高度)。注意返回?cái)?shù)值不帶單位
offsetParent	返回作為該元素帶有定位元素的父級(jí)元素(如果父級(jí)都沒(méi)有定位則返回body)

上表中給出了ofset系列的屬性及說(shuō)明，在獲取元素的位置和大小時(shí)，返回的是數(shù)值，沒(méi)有單位，獲取到的元素高度和寬度包括padding、邊框和內(nèi)容區(qū)域的寬度。

在offset中沒(méi)有提供offsetRight和offsetBottom屬性，只有offsetLeft和offsetTop兩個(gè)屬性來(lái)獲取位置。在使用時(shí)該元素的父元素定要設(shè)置定位position。如果沒(méi)有設(shè)置定位，則返回的是body。

下面我們通過(guò)案例演示如何利用offset系列相關(guān)屬性獲取鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)。

鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)是以盒子左上角位置為坐標(biāo)原點(diǎn)，具體分析如下圖所示。

鼠標(biāo)指針在盒子內(nèi)部坐標(biāo)示意圖
鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)示意圖

從上圖中可以看出，通過(guò)鼠標(biāo)指針在body中橫縱坐標(biāo)分別減去盒子距離左邊框的偏移量和盒子距離上邊的偏移量，可以得到鼠標(biāo)指針在盒子內(nèi)部的橫縱坐標(biāo)。

下面我們通過(guò)代碼來(lái)獲取鼠標(biāo)指針在盒子內(nèi)部的橫縱坐標(biāo)，示例代碼如下。

下而我們誦過(guò)代碼來(lái)獲取鼠標(biāo)指針在盒子內(nèi)部的橫縱坐標(biāo)，示例代碼如下。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>offset屬性代碼演示|web前端開(kāi)發(fā)高班 http://web.itheima.com</title>
        <!-- 定義盒子的樣式 -->
        <style>
            #box {
                position: absolute;
                left: 600px;
                top: 80px;
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        var box = document.getElementById("box");
        // 打印盒子的寬度和高度
        console.log(box.offsetWidth);
        console.log(box.offsetHeight);

        // 綁定鼠標(biāo)指針移動(dòng)事件
        box.onmousemove = function (e) {
            // 獲取盒子的偏移量
            var left = box.offsetLeft;
            var top = box.offsetTop;

            // 計(jì)算鼠標(biāo)指針在盒子內(nèi)部的偏移量
            var x = e.pageX - left;
            var y = e.pageY - top;
            console.log("X坐標(biāo)" + x + "\n" + "Y坐標(biāo)" + y);
        };
    </script>
</html>

上述代碼中，第10~16行代碼定義了盒子樣式，寬度和高度分別為200px，并且設(shè)置position屬性實(shí)現(xiàn)盒子的絕對(duì)定位，讓盒子距離父元素上邊的偏移為20px,距離左邊框的偏移為50px。第26、27行代碼打印了盒子的寬度和高度。第30行代碼通過(guò)鼠標(biāo)指針移動(dòng)事的對(duì)象獲取到鼠標(biāo)指針在頁(yè)面中的坐標(biāo)。第32、33行代碼通過(guò)offsetLeft和offsetTop分別獲取元素沿X軸方向的距離left值和沿Y軸方向的距離top值。第36~ 38行代碼根據(jù)計(jì)算公式計(jì)算出鼠標(biāo)指針在盒子中的橫坐標(biāo)和縱坐標(biāo)，然后在控制臺(tái)查看輸出結(jié)果。

瀏覽器在盒子中的坐標(biāo)

瀏覽器預(yù)覽效果如圖

鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)如圖所示，首先打印元素的寬度和高度，然后當(dāng)鼠標(biāo)指針移動(dòng)到盒子左上角時(shí)，打印結(jié)果接近于(0,0) ;當(dāng)鼠標(biāo)指針移動(dòng)到盒子右下角時(shí)，打印出的結(jié)果接近于(199，199)。

猜你喜歡：

JS判斷數(shù)組類(lèi)型的方法

JS數(shù)組去重的方法

JS數(shù)組轉(zhuǎn)為字符串如何實(shí)現(xiàn)？

黑馬程序員web前端培訓(xùn)課程

上一篇：怎樣解決組件之間的樣式?jīng)_突問(wèn)題？ 下一篇：offset與style的區(qū)別有哪些？