JS盒子模型--offset概述

JS元素偏移量

office概述

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

• 获得元素距离带有定位得父级元素位置，如果没有则是body
• 获得元素自身大小(宽度和高度(width/top))
• 注意：返回值不带单位

offset系列常用属性

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

offsetParent和parentNode的区别

offsetParent:f返回带有定位的父亲，否则返回body
parentNode:返回父亲，是最近一级的父亲，亲爹，不管父亲有没有定位

offset与style的区别

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