offset client scroll(学习笔记)

Posted 2022-01-15 做个机灵鬼

offset

offsetLeft返回元素在浏览器窗口x轴上的偏移距离
offsetTop返回元素在浏览器窗口y轴上的偏于距离
offsetLeft也可以返回子元素距离父元素左侧的距离(前提是父元素必须加了定位，否则依然是距离浏览器窗口的距离）
注意：返回的是一个数值，不带单位

offsetWidth返回元素的宽度，包括边框 内边距
offsetHeight返回元素的高度，包括边框 内边距
注意：返回的都是数值不带单位，只能获取宽高不能进行赋值

client

*clientWidth返回元素的宽度 包括内容 内边距 不包括边框，只返回数值不带单位
clientHeight返回元素的高度 包括内容 内边距 不包括边框，只返回数值不带单位
clientTop返回元素的上边框
clientHeight返回元素的上边框

scroll

scrollWidth返回自身的实质宽度，不包含边框，返回数值不带单位，比如一个盒子高100px 单文本内容150px 利用clientHeight会返回100px scrollWidth侧会返回150px
scrollHeight返回自身的实质高度
scrollTop 返回元素被卷去的上侧距离 返回数值不带单位，比如元素在页面内滚动，被浏览器卷去的距离 scrollHeight
返回元素被卷去的左侧距离

注意：onscroll是一个重点的事件