与位置相关的API辨析
screen系列:
- screenLeft:浏览器左边距离屏幕的的距离
- sceenTop:浏览器页面顶部距离屏幕上边的距离
inner系列
- innerHeight:视口高度
- innerWidth:视口宽度
offset系列
- offsetWidth:元素在浏览器页面中的实际占位宽度,包括padding和border
- offsetHeight:元素在浏览器页面中的实际占位高度,包括padding和border
- offsetLeft:元素距离浏览器页面左边的位置
- offsetTop:元素距离浏览器页面上边的位置。
client系列
- clientWidth:元素在浏览器页面的宽度,不包括左右边框
document.docuemntElement.clientWidth
表示浏览器的视口宽度
- clientHeight:元素在浏览器页面的高度,不包括上下边框
docoment.documentElement.clientHeight
表示浏览器的视口高度
- clientTop:元素上边框的宽度
- clientLeft:元素左边框的宽度。
- clientX:鼠标点击位置在浏览器页面的横坐标.使用方式为
e.clientX
- clientY : 鼠标点击位置在浏览器页面的纵坐标.
scroll系列
- scrollLeft:元素向左卷曲出去的宽度
- scrollTop:元素向上卷曲出去的宽度。
- scrollWidth:内容没有超过外面包裹的盒子时是盒子的宽度,超出后显示的是内容的实际宽度。
- scrollHeight: 内容没有超过外面包裹的盒子时是盒子的高度,超出后显示的是内容的实际高度。