JavaScript 获取元素尺寸与位置方法

获取当前设备的屏幕宽高

screen.width / screen.height

let screenWidth = window.screen.width

获取浏览器窗口可占用的尺寸

screen.availWidth / screen.availHeight

获取浏览器窗口可占用的尺寸。表示整个浏览器窗口，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders / handles）。

let availWindowWidth = window.screen.availWidth

获取浏览器窗口当前尺寸

window.outerWidth / window.outerHeight

只读属性。获取浏览器窗口当前尺寸。表示整个浏览器窗口，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders / handles）。

let outWindowWidth = window.outerWidth

获取浏览器窗口的内部宽度

window.innerWidth / window.innerHeight

只读属性。获取浏览器窗口的内部宽度。如果滚动条存在，则将包括它的尺寸。

// 返回浏览器的宽度
let intFrameWidth = window.innerWidth

// 返回一个框架集内的框架的视口宽度
let intFrameWidth = self.innerWidth

// 返回最近的父级框架集的视口宽度
let intFramesetWidth = parent.innerWidth

// 返回最外层框架集的视口宽度
let intOuterFramesetWidth = top.innerWidth

获取文档 / 页面滚动值

window.scrollX / window.scrollY

window.pageXOffset / window.pageYOffset

let y = window.scrollY

获取浏览器边框到屏幕边缘的值

window.screenLeft / window.screenTop

let leftWindowPos = window.screenLeft

获取元素的布局宽度

element.offsetWidth / element.offsetHeight

只读属性。获取元素的布局宽度。包括内边距 padding、边框(border)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽高的值。

let offsetWidth = element.offsetWidth

获取元素边框的宽度

element.offsetLeft / element.offsetTop

只读属性，获取元素边框的宽度。不包括外边距或内边距。

获取元素的内部尺寸

element.clientWidth / element.clientHeight

element.clientLeft / element.clientTop

只读属性。获取元素的内部尺寸。包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。

let intElemClientWidth = element.clientWidth

获取元素在不使用滚动条的情况下适合视口中的所有内容所需的最小尺寸

element.scrollWidth / element.scrollHeight

只读属性，获取元素在不使用滚动条的情况下适合视口中的所有内容所需的最小尺寸。如果元素的内容可以适合而不需要水平滚动条，则同 clientWidth / clientHeight 相同。

let xScrollWidth = element.scrollWidth

获取或设置元素滚动条到元素左边/上边的距离

element.scrollLeft / element.scrollTop

可以获取或设置元素滚动条到元素左边/上边的距离

//获取滚动条到元素左边的距离
let sLeft = element.scrollLeft

//设置滚动条滚动了多少像素
element.scrollLeft = 10