浅谈一下JS不同的宽高、相对位移

接下来介绍JS的各种宽度,坐标位置,相对位移的内容,帮大家也是帮自己理清一下响应的知识点

1.1 屏幕宽高

window.screen.width

返回当前屏幕宽度(分辨率值)

window.screen.height

返回当前屏幕高度(分辨率值)

window.screen.availWidth

返回当前屏幕宽度(空白空间)

window.screen.availHeight

返回当前屏幕高度(空白空间)

1.2 浏览器的宽高

outerHeight

包括页面窗口外面的整个浏览器高度

outerWidth

包括页面窗口外面的整个浏览器宽度

1.3 视口的宽高

innerHeight

浏览器的窗口的视口的高度(包括滚动条)

innerWidth

浏览器的窗口的视口的宽度(包括滚动条)

document.body.clientWidth 
document.body.offsetWidth

浏览器的窗口的视口的宽度(不包括滚动条)

document.body.clientHeight 
document.body.offsetHeight

浏览器的窗口的视口的高度(不包括滚动条)

1.4 页面的宽高

document.body.scrollWidth

页面内容宽度,包括未显示在视口需要滚动部分

document.body.scrollHeight

页面内容高度,包括未显示在视口需要滚动部分

1.5 元素自身的宽高

Element.offsetWidth

网页元素的宽度

Element.offsetHeight

网页元素的高度

2.1 浏览器相对屏幕的位移

screenX

浏览器左边界相对于操作系统桌面左边界的水平位移

screenY

浏览器顶部相对于系统桌面顶部的垂直位移

2.2 元素相对视口的位移

Element.getBoundingClientRect().left

网页元素相对于视口左上角的水平位移

Element.getBoundingClientRect().top

网页元素相对于视口左上角的垂直位移

2.3 视口相对页面内容的位移

scrollX

视口左边界相对于页面内容左边界的水平位移

scrollY

视口上边界相对于页面内容上边界的垂直位移

2.4 元素相对页面内容的位移

Element.getBoundingClientRect().left + scrollX

指定元素左边界相对于页面内容左边界的水平位移

Element.getBoundingClientRect().top + scrollY

指定元素上边界相对于页面内容上边界的垂直位移

2.5 相对于父元素的位移

Element.offsetLeft

返回当前元素左上角相对于Element.offsetParent节点的水平位移

Element.offsetTop

返回垂直位移,单位为像素
通常,这两个值是指相对于父节点的位移

推荐阅读更多精彩内容