js 偏移量相关

一.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    获取浏览器可视区域的高度,包含滚动条