offset概述

offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等，offset系列的相关属性如表1所示。

表1 offset系列属性

表1中，给出了offset系列的属性及说明，在获取元素的位置和大小时，返回的是数值，没有单位，获取到的元素高度和宽度包括padding、边框和内容区域的宽度。

在offset中没有提供offsetRight和offsetBottom属性，只有offsetLeft和offsetTop两个属性来获取位置。在使用时该元素的父元素一定要设置定位position。如果没有设置定位，返回的是body。

下面我们通过案例演示如何利用offset系列相关属性获取鼠标指针在盒子内的坐标。鼠标指针在盒子内的坐标是以盒子左上角位置为坐标原点，具体分析如图9-1所示。

图1 鼠标指针在盒子内的坐标示意图

从图1可以看出，通过鼠标指针在body中横纵坐标分别减去盒子距离左边框的偏移量和盒子距离上边的偏移量，可以得到鼠标指针在盒子内部的横纵坐标。

下面我们通过代码来获取鼠标指针在盒子内部的横纵坐标，示例代码如下。

 1  <!-- 定义盒子样式 -->

 2  <style>

 3   #box {

 4    background-color: pink;

 5    width: 200px;

 6    height: 200px;

 7    position: absolute;

 8    left: 50px;

 9    top:20px;

 10  }

 11 </style>

 12 <div id="box"></div>

 13 <script>

 14  var box = document.getElementById('box');

 15   // 打印盒子的宽度和高度

 16   console.log(box.offsetWidth);

 17   console.log(box.offsetHeight);

 18  // 绑定鼠标指针移动事件

 19  box.onmousemove = function(e) {

 20   // 获取盒子的偏移量

 21   var left = box.offsetLeft;

 22   var top = box.offsetTop;

 23   // 计算鼠标指针在盒子内部的坐标

 24   var x = e.pageX - left;

 25   var y = e.pageY - top;

 26   console.log('x坐标：' + x + ' y坐标：' + y);

 27  };

 28 </script>

上述代码中，第3~10行定义了盒子样式，宽度和高度分别为200px，并且设置position属性实现盒子的绝对定位，让盒子距离父元素上边的偏移为20px，距离左边框的偏移为50px。第16、17行代码打印了盒子的宽度和高度。第19行代码通过鼠标指针移动事件的对象获取到鼠标在页面中的坐标。第21、22行代码通过offsetLeft和offsetTop分别获取元素沿X轴方向的距离left值和沿Y周方向的距离top值。第24~26行代码根据计算公式计算出鼠标指针在盒子中横坐标和纵坐标，然后在控制台查看输出结果。

浏览器预览效果如图2所示。

图2 鼠标指针在盒子内的坐标

如图2所示，首先打印元素的宽度和高度，然后当鼠标指针移动到盒子左上角时，打印结果接近于(0,0)；当鼠标指针移动到盒子右下角时，打印出的结果接近于(199,199)。