js获取元素大小和位置

本博文参照黑马程序员pink老师讲解的前端视频记录

scroll家族

获取宽高

获取元素的内容总宽高（不包含滚动条）返回值不带单位
scrollWidth和scrollHeight

获取位置

获取元素内容往左，往上滚出去看不到的距离
被卷去的头部或者左侧
scrollLeft和scrollTop
这两个属性是可以修改（赋值）的

检测页面滚动的头部距离（被卷去的头部）用document.documentElement.scrollTop

offset家族

获取宽高

获取元素的自身宽高，包含元素自身设置的宽高，内容+padding+border
offsetWidth和offsetHeight

获取位置

获取元素距离自己定位父级元素的左，上距离
offsetTop和offsetLeft得到位置以距离自己最近一级的带有定位的父亲为准，但如果父亲都没有则以文档左上角为准
offsetLeft和offsetTop是只读属性

client家族

获取宽高

获取元素的可见部分宽高（不包含边框，滚动条等）
clientWidth和clientHeight

获取位置

获取左边框和上边框宽度
clientLeft和clientTop 是只读属性

会在窗口尺寸改变的时候触发事件
resize

window.addEventListener('resize',function(){
		// 执行的代码
})

检测屏幕宽度

window.addEventListener('resize',function(){
	let w = document.documentElement.clientWidth
	console.log(w)