操作dom坐标

与坐标有关的属性

screenX, screenY, screen

屏幕, 鼠标相对于我们的计算机屏幕左上角的坐标
clientX, clientY, client

客户端, 鼠标相对于浏览器中的页面的可视区域的左上角的坐标
pageX, pageY, page

页面的意思, 鼠标相对于页面( 页芯 )的左上角的坐标
offsetX, offsetY offset

偏移量, 可以认为是相对的距离.
offsetX 与 offsetY

表示鼠标在盒子内部, 相对于盒子而言它的坐标是多少
layerX, layerY

其功能能可以简单的理解为就是 offsetX Y, 但是这个属性是火狐中的属性
练习: 跟着鼠标移动的图片
需求是鼠标移动到哪里, 图片就跟到哪里
练习: 拖拽
页面中有一个盒子, 鼠标点击盒子里面的某一个区域( 任意 )
在鼠标按着不动, 移动鼠标, 盒子会跟着鼠标一起移动, 鼠标放开后
盒子停留.

获取元素宽高及其他属性

​ 元素.offsetWidth
元素.offsetHeight
元素.offsetLeft
元素.offsetTop

html 元素 clientWidth 浏览器可视区域的宽度

var sw = document.documentElement.clientWidth;

元素.offsetX

点击的盒子内部某个点距离盒子的距离

vue 获取dom宽高和坐标