js offset知识点

一：offsetHight,offsetWidth

获取对象的宽度和高度(自己的，与他人无关)!!!


//offsetWidth =  width  + border  +  padding 
div {  width:200px;  border:10px solid red; padding:20px;}
//div.offsetWidth =  200 + 10 + 20

为什么要用 offsetWidth 而不用 div.style.width？

因为div.style.width：只能得到行内的数值！！！

二：offsetLeft,offsetTop

offsetLeft：返回当前元素左边缘距离offsetParent返回元素的距离的数值，单位是像素。

offsetTop：返回当前元素上边缘距离offsetParent返回元素的距离的数值，单位是像素。

解释：返回距离上级盒子（最近的带有定位）左边/上边的位置；

如果父级都没有定位则以body 为准,这里的父级指的是所有上一级不仅仅指的是,父亲,还可以是,爷爷,曾爷爷

offsetLeft 、offsetTop从父级的padding 开始算，父亲的border 不算

总结：就是子盒子到定位的父盒子边框到边框的距离

三：offsetParent

父级参照物在同一个平面中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）

一般来说一个页面中所有元素的父级参照物都是body，document.body.offsetParent // null

想要改变父级参照物需要通过position定位来进行改变（absolute relative fixed 都可以进行改变）

1.如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

2.如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

四：offsetLeft与style.left区别

1.最大区别在于 offsetLeft:可以返回没有定位盒子的距离左侧的位置。而 style.left 不可以,只有定位的盒子才有 left,top,right

2.offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

3.offsetTop 只读，而 style.top 可读写。

4.如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

5.最重要的区别 style.left 只能得到行内样式，offsetLeft 随便

五：原生js中获取offset系列值和 jquery中获取 offset（）的区别

1. 如果父元素有定位，那么子元素的offset是相对于父元素的border内边界的距离

2 .如果父元素没有定位，那么子元素的offset是相对于文档的边界的距离

3 .offset系列在原生js中仅仅可读，不可以设置

4 .但是在jquery中 offset( ) 不写参数可以获取top left 两个数字类型的值，单位是px，如果写了参数代表可以设置top left

$("div").offset({left:100,top:100})
console.log($("div").offset()) //{top: 100, left: 100}

5. jquery官方文档定义offset : 获取匹配元素在当前视口的相对偏移。所以在jquery中永远都是相对于文档边界，而不论父元素是否定位

总结：

1.原生js中通过DOM 操作获取元素的offsetLedt offsetTop 是一个可读的属性，不可设置值，如果父元素定位，那么相对于父元素边界获取offset值，如果父元素没有定位，那么相对于文档边界
2.而在jquery中offset( ) 可以获取:（）里面没有参数，也可以设置（）里面有top left 的键值对，并且仅仅是相对于文档边界 获取或者设置的，无论父元素是否定位

js offset