标签：注意 拖拽 隐藏 splay font fse 分析 并且 模态框
offset翻译过来，就是偏移量，我们使用offset系列相关属性，可以动态的得到该元素的位置（偏移）、大小等。
offset系列常用属性：
| offset系列属性 | 作用 |
| element.offsetParent | 返回作为该元素带有定位的父级，如果父级都没有定位，则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度，返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度，返回数值不带单位 |
| offset | style |
| offset可以得到任意样式表中的样式值 | style只能得到行内样式表的样式值 |
| offset系列获得的数值是没有单位的 | style.width获得的是带有单位的字符串 |
| offsetWIdth包含padding+border+width | style.width获得不包含padding和border的值 |
| offsetWidth等属性是只读属性，只能获取不能赋值 | style.width是可读写属性，可以获取也可以赋值 |
| 所以，我们想要获取元素大小位置，用offset更合适 | 所以，我么想要给元素更改值，则需要用style改变 |
案例分析：
1.点击弹出层，模态框和遮罩层就会显示出来display:block;
2.点击关闭按钮，模态框和遮罩层就会隐藏起来display:none;
3.在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标；
4.触发事件是鼠标按下mousedown,鼠标移动mousemove，鼠标松开mouseup；
5.拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了；
6.鼠标按下触发的事件源是最上面一行，就是id为title
7.鼠标的坐标减去鼠标在盒子里的坐标，才是模态框真正的位置。
标签：注意 拖拽 隐藏 splay font fse 分析 并且 模态框
原文地址：https://www.cnblogs.com/guwufeiyang/p/12992769.html
