1.1. 元素偏移量 offset 系列

1.1.1 offset 概述

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

  1. 获得元素距离带有定位父元素的位置
  2. 获得元素自身的大小（宽度高度）
  3. 注意：返回的数值都不带单位

    1.1.2 offset 与 style 区别

    offset

  • offset 可以得到任意样式表中的样式值
  • offset 系列获得的数值是没有单位的
  • offsetWidth 包含padding+border+width
  • offsetWidth 等属性是只读属性，只能获取不能赋值

  • 所以，我们想要获取元素大小位置，用offset更合适

    style

  • style 只能得到行内样式表中的样式值

  • style.width 获得的是带有单位的字符串
  • style.width 获得不包含padding和border 的值
  • style.width 是可读写属性，可以获取也可以赋值
  • 所以，我们想要给元素更改值，则需要用style改变

    1.1.3 案例：获取鼠标在盒子内的坐标

  1. 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
  2. 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
  3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
  4. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标
  5. 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动
    1. var box = document.querySelector('.box');
    2. box.addEventListener('mousemove', function(e) {
    3. var x = e.pageX - this.offsetLeft;
    4. var y = e.pageY - this.offsetTop;
    5. this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
    6. })

    1.1.4 案例：模态框拖拽

    ```html <!DOCTYPE html>

```