首頁技術(shù)文章正文

如何得到鼠標指針在某個盒子中坐標？

更新時間:2022年01月07日16時32分來源:傳智教育瀏覽次數(shù):

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

offset系列屬性

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

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

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

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

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

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

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

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

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

<!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前端開發(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);

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

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

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

瀏覽器在盒子中的坐標