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 的键值对,并且仅仅是相对于文档边界 获取 或者设置的,无论父元素是否定位