lwz blog

# 元素尺寸位置

# 元素的偏移量

属性 描述
offsetWidth 获取元素实际宽度 元素内容(content)+内边距(padding)+边框(border)(不包括外边距)
offsetHeight 获取元素实际高度
offsetLeft 表示该元素的左上角距离最近的具有定位属性的祖先元素的左上角的水平距离。
offsetTop 表示该元素的左上角距离最近的具有定位属性的祖先元素的左上角的垂直距离。
offsetParent 表示距离该元素最近的具有定位属性的祖先元素。

注意：以上均为只读属性，不能修改，返回的是一个数字

offset

# 元素的大小以及相对视口的位置

var object = element.getBoundingClientRect()

返回一个对象：

{
    bottom: 1793,
    height: 1795,
    left: 0,
    right: 353,
    top: -2,
    width: 353,
    x: 0,
    y: -2,
}
属性 描述
x/y 元素的左上角和视口左上角的距离
width/height 边框 + 内边距 + 内容框
top 元素的上边界和视口上边界的距离
left 元素的左边界和视口左边界的距离
right 元素的右边界和视口的左边界的距离
bottom 元素的下边界和视口上边界的距离

# 滚动条元素的位置

获取具有滚动条元素的位置属性

属性 描述
对象.scrollTop 具有滚动条的元素在滚动的时候，他的内部元素超出该元素顶部距离
对象.scrollLeft 具有滚动条的元素在滚动的时候，他的内部元素超出该元素左边距离

# 元素的内尺寸

属性 描述
clientWidth/clientHeight 表示元素的内尺寸：元素内容(content)+内边距(padding)
clientTop/clientLeft 表示元素的上边框和左边框大小：元素内容(border)

client

# 页面的实际大小

document.documentElement.scrollWidth
document.documentElement.scrollHeight

scroll

# 窗口左上角 与 屏幕左上角的 距离

window.screenX
window.screenY

# 屏幕宽高

window.screen.width
window.screen.height

# 屏幕可用宽高（去除任务栏）

window.screen.availWidth
window.screen.availHeight

# 窗口的内高度、内宽度（文档显示区域+滚动条）

window.innerWidth
window.innerHeight

# 窗口的外高度、外宽度

window.outerWidth
window.outerHeiht

← 本地存储 →