js获取元素的偏移量offset简单方法(必看)

下面是关于“js获取元素的偏移量offset简单方法(必看)”完整攻略的讲解。

下面是关于“js获取元素的偏移量offset简单方法(必看)”完整攻略的讲解。

什么是偏移量？

元素的偏移量（offset）就是指该元素相对于其定位父级元素的左上角的位置。通常我们用left和top来表示。

为什么需要获取元素的偏移量？

在页面中，我们经常需要进行元素位置的计算，比如动态计算元素的位置，比如实现元素拖拽等等。这些操作都会用到元素的偏移量。

使用offset方法获取偏移量

在Javascript中，我们可以使用offset方法来获取元素的偏移量。它返回一个包含left和top属性的对象，在该对象中，left表示该元素相对于其定位父级元素的左侧偏移量，top表示该元素相对于其定位父级元素的顶部偏移量。

var ele = document.getElementById('myDiv');
var offsetLeft = ele.offsetLeft;
var offsetTop = ele.offsetTop;
console.log(offsetLeft, offsetTop);

以上代码中，我们通过getElementById方法获取到ID为myDiv的元素，然后分别使用offsetLeft和offsetTop方法获取其偏移量，并打印出来。

需要注意的是，这种方法获取到的偏移量是相对于定位父级元素的。如果该元素没有定位父级元素，则这种方法获取到的偏移量是相对于body元素的。

除了使用offsetLeft和offsetTop方法，我们还可以直接使用offset方法获取包含left和top属性的对象。

var ele = document.getElementById('myDiv');
var offset = ele.offset;
console.log(offset.left, offset.top);

以上代码中，我们使用offset方法获取包含left和top属性的对象，然后分别获取其中的left和top属性，并打印出来。

示例说明

接下来，我们通过两个示例来说明如何使用这些方法获取元素的偏移量。

示例一：动态计算元素的位置

假设我们需要实现一个页面，该页面中包含一个div元素，该元素会根据鼠标位置进行动态位置计算，始终处于鼠标位置的上方。为了实现这个功能，我们需要获取到鼠标位置以及div元素的偏移量。

<div id="myDiv" style="position: absolute; width: 100px; height: 50px; background-color: yellow;"></div>

<script>
    document.onmousemove = function(event) {
        var ele = document.getElementById('myDiv');
        var x = event.clientX;
        var y = event.clientY;
        var offsetLeft = ele.offsetLeft;
        var offsetTop = ele.offsetTop;
        ele.style.left = x - offsetLeft - 50 + 'px';
        ele.style.top = y - offsetTop - 50 + 'px';
    }
</script>

以上代码中，我们在页面中创建了一个div元素，并且将其定位为绝对定位。然后，我们注册了onmousemove事件，该事件会在鼠标移动时触发。在事件中，我们获取鼠标的x、y坐标，以及div元素的偏移量，然后将div元素的left和top属性设置为x-offsetLeft-50和y-offsetTop-50，其中50是div元素的一半宽度和高度。

通过这种方式，div元素就会始终处于鼠标位置的正上方。

示例二：实现元素拖拽

另一个常见的场景是，我们需要实现元素的拖拽功能。当鼠标按下时，我们需要记录该元素的鼠标坐标的偏移量，然后在鼠标移动时将元素移动到对应位置。

<div id="myDiv" style="position: absolute; width: 100px; height: 50px; background-color: yellow; cursor: move;"></div>

<script>
    var ele = document.getElementById('myDiv');

    ele.onmousedown = function(event) {
        var startX = event.clientX;
        var startY = event.clientY;
        var offset = this.offset;

        document.onmousemove = function(event) {
            var moveX = event.clientX - startX;
            var moveY = event.clientY - startY;

            ele.style.left = offset.left + moveX + 'px';
            ele.style.top = offset.top + moveY + 'px';
        }

        document.onmouseup = function(event) {
            document.onmousemove = null;
            document.onmouseup = null;
        }

        return false;
    }
</script>

以上代码中，我们创建了一个div元素，并且在其中注册了onmousedown事件。在事件中，我们记录下鼠标按下时的坐标位置，以及div元素的偏移量。然后我们注册了onmousemove事件，在该事件中，我们通过计算鼠标移动的距离，计算出元素应该移动的位置，最后将元素移动到该位置上。在onmouseup事件中，我们解除onmousemove和onmouseup事件的注册。

通过这种方式，我们就实现了简单的元素拖拽功能。

希望以上示例可以帮助您理解如何使用offset方法获取元素的偏移量，同时也能帮助您了解如何使用元素的偏移量进行动态位置计算和拖拽等操作。