一.offset
先确定父元素之后才会计算值
父元素的查找:会先从最近的父元素开始,如果父元素并没有定位(position值为fixed absolute 或者relative)则会再往上一级查找,找到则停止,否则一直查找到html下的body并将body作为父元素.
换句话说就是offset只受有定位的父元素(position值为fixed absolute 或者relative)和自身所在offsetparent位置影响
元素.offsetTop : 子元素距离父元素的顶部的距离
元素.offsetLeft :子元素距离父元素的最左边的距离
以上两个值包括了父元素的边框+父元素的内边距(前提是标准盒模型下),且不包括子元素的边框
元素.offsetWidth :元素的宽度
元素.offsetHeight :元素的高度
以上两个值包括元素的内边距(前提是在标准盒模型下,因为标准盒模型下padding会把元素撑开),元素的边框.
二.client相关
元素.clientLeft :获取元素左边框的宽度
元素.clientTop :获取元素上边框的宽度
注意:并没有clientBottom和clientRight方法
元素.clientWidth :获取元素的宽度
元素.clientHeight :获取元素的高度
以上两个值包括元素的内边距(前提是在标准盒模型下,因为标准盒模型下padding会把元素撑开). 和.offsetWidth与.offsetHeight不同是client不包括边框
document.documentElement.clientWidth 或者 document.body.clientWidth
获取浏览器可视区域的宽度,不包含滚动条
document.documentElement.clientHeight 或者 document.body.clientHeight
获取浏览器可视区域的高度,不包含滚动条
Tips:单词较长,如果出不来检查一下拼写错误
三.inner相关获取浏览器可视窗口
window.innerWidth 获取浏览器可视区域的宽度,包含滚动条
window.innerHeight 获取浏览器可视区域的高度,包含滚动条