js---三大系列(元素偏移量offset,元素可视区client,元素滚动scroll)

1.元素偏移量offset系列

1.1offset

1.获取元素距离带有定位父元素的位置;

2.获得元素自身的大小;

3.返回的数值都不带单位;

//返回该元素带有定位的父级元素,如果父级元素都没有定位则返回body
element.offsetParent
//返回元素相对带有定位父元素上方的偏移
element.offsetTop
//返回元素相对带有定位父元素左边框的偏移
element.offsetLeft
//返回自身包括padding,边框,内容区的宽度,返回数值不带单位
element.offsetWidth
//返回自身包括padding,边框,内容区的宽度,返回数值不带单位

1.2offset与style区别

offset

1.offset可以得到任意样式表的样式值;

2.offset系列获得的数值是没有单位的;

3.offsetWidth包含padding+border+width;

4.offsetWidth等属性是只读属性,只能获取不能赋值;

style

1.style只能得到行内样式表中的样式值;

2.style.width获得的是带有单位的字符串;

3.style.width获得不包含padding和border的值;

4.style.width是可读可写属性,可以获取也可以赋值;

想要给元素更改值,则需要style改变;

2.元素可视区client系列

2.1client系列属性

//返回元素上边框的大小
element.clientTop
//返回元素左边框的大小
element.clientLeft
//返回自身包括padding,内容区的高度,不含边框,返回数值不带单位
element.clientWidth
//返回自身padding,内容区的宽度,不含边框,返回数值不带单位
element.clientHeight

3.元素滚动scroll系列

scroll系列属性

//返回被卷去的上侧距离,返回数值不带单位
element.scrollTop
//返回卷去的左侧距离,返回数值不带单位
element.scrollLeft
//返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollWidth
//返回自身实际的高度,不含边框,返回数值不带单位
element.scrollHeight

被卷去的头部:

如果浏览器高度不足以显示整个页面时,会自动出现滚动条,当滚动条向下滚动时,页面上面被隐藏掉的高度,就是页面被卷去的头部;

页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset

**注意:**元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset

4.刷新页面触发load的三种情况

1,a标签的超链接;

2.F5或者刷新按钮(强制刷新);

3,前进后退按钮;

特殊情况: 在火狐浏览器中,有个往返缓存,这个缓存不仅保存着页面数据,还保存了DOM和JavaScript的状态,整个页面被保存在了内存中,所以后退按钮不能刷新页面;

解决方法: 使用pageshow事件触发,这个事件在页面显示时触发,无论页面是否来自缓存,重新加载页面中,pageshow会在load事件后触发,根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件;