js的三大系列
一、offset系列
offset系列是获取元素的宽、高、距离左边和距离顶部的距离及最近定位的父级元素,对应的五个属性如下:
1、offsetWidth
获取元素的宽,包括元素的边框
2、offsetHeight
获取元素的高,包括元素的边框
3、offsetLeft
这个属性需要分两种情况讨论
- 当元素没有脱离文档流时,offsetLeft获取到的值就是元素到左边的距离: offsetLeft = 父级的margin-lefe+父级的padding-left+父级的border+自己的margin-left (多层嵌套就会有多个父级,累加计算)
- 当元素脱离文档流时,offsetLeft获取到的值和父级元素没有关系:offsetLeft的值只和自己的left值和maigin-left值有关
4、offsetTop
此属性和offsetLeft一样,在此就不赘述了。
5、offsetParent
offsetParent属性获取的是该元素中有定位的最近父级元素
简述offset系列和style.left style.top style.width style.height 的区别
- 当元素的样式是在html页面标签中,用style属性定义的话,可以通过元素(e)e.style.left ;e.style.top; e.style.width; e.style.height来获取,但是除此之外的样式定义,通过元素.的方式无法获取,只能通过offset系列来获取;
- offsetLeft和offsetTop可以获取没有定位的元素的left和top值;
- 通过e.style获取到的值是字符串类型,offset获取到的是数值类型(结果是四舍五入过的);
- 只能通过offset获取属性的值,不能用来给元素赋值,style既可以获取值,也可以用来写入值。
二、scroll系列
scroll 用来获取元素内容的一些值
1、scrollWidth
元素中实际内容的宽度(不包括元素的边框),包括溢出的部分
2、scrollheight
元素中实际内容的高度(不包括元素的边框),包括溢出的部分
当元素中的内容不足或没有内容时,这两个属性获取到的是元素的宽高,和offsetWidth、offsetHeight获取到的值相同
3、scrollLeft
onscroll事件发生时,横向滚动条往右拉之后,内容往左卷曲出去的宽度
4、scrollTop
onscroll事件发生时,竖向滚动条向下拉之后,内容往上卷曲出去的高度
不同浏览器获取scrollLeft和scrollTop的兼容代码
function getScroll(){
return {
scrollTop= window.page.YOffset||document.documentElement.scrollTop||document.body.scrollTop;
scrollLeft=
window.page.XOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
}
}
三、client系列
获取的是元素可视区的值
1、clientWidth
可视区域的宽度(没有边框)
2、clientHeight
可视区域的高度(没有边框)
3、clientLeft
可视区域距离左边边框的距离(左边边框的宽度)
4、clientTop
可视区域距离上边边框的距离(上边边框的宽度)