元素偏移量offset系列

Posted 2020-12-06 guwufeiyang

1.1 offset概述

offset翻译过来，就是偏移量，我们使用offset系列相关属性，可以动态的得到该元素的位置（偏移）、大小等。

• 获取元素距离带有定位父元素的位置。
• 获得元素自身的大小（宽度高度）。
• 注意： 返回的数值都不带单位。

offset系列常用属性：

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级，如果父级都没有定位，则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

 

 

 

 

 

 

 

1.2 offset与style区别

offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWIdth包含padding+border+width	style.width获得不包含padding和border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我么想要给元素更改值，则需要用style改变

 

 

 

 

 

 

 

1.3 拖拽模态框

案例分析：

1.点击弹出层，模态框和遮罩层就会显示出来display:block;

2.点击关闭按钮，模态框和遮罩层就会隐藏起来display:none;

3.在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标；

4.触发事件是鼠标按下mousedown,鼠标移动mousemove，鼠标松开mouseup；

5.拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了；

6.鼠标按下触发的事件源是最上面一行，就是id为title

7.鼠标的坐标减去鼠标在盒子里的坐标，才是模态框真正的位置。