上图中，我给el-scrollbar__view这个div增加了10px的红⾊边框，整个div的实际⾼度，宽度变成了3452px，1920px，观察clientWidth，clientHeight的值是3432px，1900px，并没有包含边框和滚动条的宽度。
克服自己的弱点2. scrollWidth，scrollHeight
scrollWidth，scrollHeight表⽰对象的实际内容的宽度，不包括边框（但是包括滚动条），会随对象中内容超过可视区后⽽变⼤。
上图中，我还是给el-scrollbar__view这个div增加了10px的红⾊边框，整个div的实际⾼度，宽度变成了3452px，1920px，观察scrollWidth，scrollHeight的值是3432px，1900px，并没有包含边框的宽度。
3. offtWidth，offtHeight
offtWidth，offtHeight表⽰对象整体的实际宽度，包括滚动条和边框，会随对象显⽰⼤⼩的变化⽽改变。
上图中，我还是给el-scrollbar__view这个div增加了10px的红⾊边框，整个div的实际⾼度，宽度变成
了3452px，1920px，观察scrollWidth，scrollHeight的值仍然是3452px，1920px，包含滚动条和边框。
4. clientLeft，clientTop
clientLeft，clientTop表⽰对象边框的宽度。
别墅庭院设计说明上图中，我还是给el-scrollbar__view这个div增加了10px的红⾊边框，观察clientLeft， clientTop均为10px。郭家街小学
5. scrollLeft，scrollTop
scrollLeft,scrollTop表⽰对象的显⽰（可见）的内容与该对象实际的内容的距离。
上图中，我们给content这个ction设置了宽⾼均是300px，并设置显⽰滚动条，将滚动条拖动⼀部分，观察scrollLeft，scrollTop的值分别是164px，204px，这对应着当前内容距离原来实际内容的距离（假设蓝⾊框是实际内容的距离）。
6. offtLeft，offtTop
offtLeft，offtTop表⽰对象边框的外边缘距离与已定位的⽗容器（offtparent）的内边距离（不包括元素的边框和⽗容器的边框）。
上图中，el-dialog这个div距离已定位的⽗容器（这⾥是el-dialog__wrapper）的宽⾼分别是672px，61px，与offtLeft，offtTop值⼀致。
我们给el-dialog__wrapper加上⼀个20px的黄⾊边框，给el-dialog加上⼀个10px的蓝⾊边框，再来观察offtLeft，offtTop的值，发现在计算时，是从黄⾊边框的内边距到蓝⾊边框的外边距，不包括边框。
7. coding
明确上述概念之后，我们来着⼿写代码，先说下我的业务场景。
有⼀个dialog弹框，弹框的背景并不是全屏的，只在除header，sidebar的地⽅显⽰，要求拖拽dialog弹框不能超过背景。
我们在main.js同级⽬录创建directives.js，具体代码如下。qq介绍
// directives.js
import Vue from 'vue';
// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
北京社保公积金bind(el, binding, vnode, oldVnode) {
// 获取拖拽内容头部
const dialogHeaderEl = el.querySelector('.el-dialog__header');
// 获取拖拽内容整体这个rrc-dialog是我⾃⼰封装的组件如果使⽤element的组件应写成.el-dialog
const dragDom = el.querySelector('.rrc-dialog');
dialogHeaderEl.style.cursor = 'move';
// 获取原有属性 ie dom元素.currentStyle ⽕狐⾕歌 ComputedStyle(dom元素, null);缴费基数是什么
const sty = dragDom.currentStyle || ComputedStyle(dragDom, null);
// ⿏标按下事件
大巴扎// ⿏标按下，计算当前元素距离可视区的距离 (⿏标点击位置距离可视窗⼝的距离)
const disX = e.clientX - dialogHeaderEl.offtLeft;
const disY = e.clientY - dialogHeaderEl.offtTop;
// 获取到的值带px 正则匹配替换
let styL, styT;
// 注意在ie中第⼀次获取到的值为组件⾃带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+place(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+place(/\%/g, '') / 100);
唐朝的皇帝列表
