offsetWidth clientHeight的理解及使用

DOM中的offsetWidth clientHeight等详细理解

原文： https://www.cnblogs.com/ifworld/p/7605954.html

 offsetWidth       //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

offsetHeight      //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）

clientWidth        //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

clientHeight       //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）

style.width         //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）

style.height       //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）

scrollWidth       //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

scrollHeigh       //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同

1. style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；

2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性

3. style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。

offsetTop    //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。

             所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。

offsetLeft       //此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。

scrollLeft        //此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。

             返回值是一个整数，单位是像素。此属性是可读写的。

scrollTop   //此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。

             返回值是一个整数，单位是像素。此属性是可读写的。

当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等）

clientX        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  不随滚动条滚动而改变；

clientY        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  不随滚动条滚动而改变；

pageX        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  随滚动条滚动而改变；

pageY        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  随滚动条滚动而改变；

screenX     鼠标相对于显示器屏幕左上角x轴的坐标；  

screenY      鼠标相对于显示器屏幕左上角y轴的坐标；  

offsetX        鼠标相对于事件源左上角X轴的坐标

offsetY        鼠标相对于事件源左上角Y轴的坐标

实现弹框拖动，自定义拖动指令

directives.js文件
在vue中结合element ui的el-dialog使用

先自定义拖动指令如下：

// directives.js
import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽   Vue.directive    vue自定义指令
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    // 获取拖拽内容头部
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    // 获取拖拽内容整体 如果使用element的组件应写成.el-dialog
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    // 鼠标按下事件
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      // 鼠标拖拽事件
      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
        const l = e.clientX - disX
        const t = e.clientY - disY
        console.log(dialogHeaderEl.offsetLeft, l, '拖拽', dragDom.offsetParent.clientWidth)
        // const l = dialogHeaderEl.offsetLeft
        // const t = dialogHeaderEl.offsetTop

        let finallyL = l + styL
        let finallyT = t + styT

        // 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值
        // dragDom.offsetParent表示弹窗阴影部分
        // dragDom.clientWidth 表示当前元素 el-dialog 的宽度
        // dragDom.offsetParent.offsetLeft=0 阴影距离左边的偏移量
        if (finallyL < 0 - 1.5 * dragDom.clientWidth - dragDom.offsetParent.offsetLeft) {
          finallyL = 0 - 1.5 * dragDom.clientWidth - dragDom.offsetParent.offsetLeft
        } else if (finallyL > 1.5 * dragDom.clientWidth) {
          finallyL = 1.5 * dragDom.clientWidth
        }

        if (finallyT < 0 - 0.5 * dragDom.clientHeight - dragDom.offsetParent.offsetLeft) {
          finallyT = 0 - 0.5 * dragDom.clientHeight - dragDom.offsetParent.offsetLeft
        } else if (finallyT > dragDom.offsetParent.clientHeight - 1.5 * dragDom.clientHeight - dragDom.offsetParent.offsetLeft) {
          finallyT = dragDom.offsetParent.clientHeight - 1.5 * dragDom.clientHeight - dragDom.offsetParent.offsetLeft
        }

        // 移动当前元素
        dragDom.style.left = `${finallyL}px`
        dragDom.style.top = `${finallyT}px`

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

使用：
v-dialogDrag

<el-dialog v-dialogDrag :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" title="弹框" width="500px">
.
.
.
.
</el-dialog>