操作dom获取宽高和坐标

操作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获取宽高和坐标

ref 获取dom

<iframe
      id="mainIframe"
      name="mainIframe"
      src="/cigmap-v2/#/riskctrl/onemap"
      frameborder="0"
      scrolling="auto"
      ref="myiframe"
    ></iframe>



// console.log(this.$refs.myiframe);


一定要加s      $refs

​ 获取元素坐标

this.$refs.xxx.getBoundingClientRect()

​ 获取元素高度

var navH = this.$refs.navH;
    console.log(1111111111111,navH.offsetHeight);

​ 获取屏幕高度

console.log('this.$refs.appH.clientHeight',this.$refs.appH.clientHeight);
this.$refs.appH.clientHeight