原生JS获取元素宽高：offset系列、scroll系列、client系列解析

2023-11-19 08:36:37

精讲-offset系列、scroll系列、client系列

offset系列

offset系列方法可以获取元素相对于其最近的定位祖先元素的位置。如果元素没有定位祖先元素，则相对于文档body元素。

offsetParent：返回元素的定位祖先元素，如果没有定位祖先元素，则返回null。
offsetLeft：返回元素相对于其定位祖先元素的左偏移量。
offsetTop：返回元素相对于其定位祖先元素的顶部偏移量。
offsetWidth：返回元素的总宽度，包括内边距和边框。
offsetHeight：返回元素的总高度，包括内边距和边框。

// 获取元素的offsetParent
const offsetParent = document.getElementById('box').offsetParent;

// 获取元素相对于其定位祖先元素的左偏移量
const offsetLeft = document.getElementById('box').offsetLeft;

// 获取元素相对于其定位祖先元素的顶部偏移量
const offsetTop = document.getElementById('box').offsetTop;

// 获取元素的总宽度，包括内边距和边框
const offsetWidth = document.getElementById('box').offsetWidth;

// 获取元素的总高度，包括内边距和边框
const offsetHeight = document.getElementById('box').offsetHeight;

scroll系列

scroll系列方法可以获取元素的滚动条位置。

scrollWidth：返回元素的总宽度，包括滚动条。
scrollHeight：返回元素的总高度，包括滚动条。
scrollLeft：返回元素的水平滚动条位置。
scrollTop：返回元素的垂直滚动条位置。

// 获取元素的总宽度，包括滚动条
const scrollWidth = document.getElementById('box').scrollWidth;

// 获取元素的总高度，包括滚动条
const scrollHeight = document.getElementById('box').scrollHeight;

// 获取元素的水平滚动条位置
const scrollLeft = document.getElementById('box').scrollLeft;

// 获取元素的垂直滚动条位置
const scrollTop = document.getElementById('box').scrollTop;

client系列

client系列方法可以获取元素相对于窗口的坐标。

clientLeft：返回元素相对于窗口的左偏移量。
clientTop：返回元素相对于窗口的顶部偏移量。
clientWidth：返回元素的总宽度，包括内边距和边框。
clientHeight：返回元素的总高度，包括内边距和边框。

// 获取元素相对于窗口的左偏移量
const clientLeft = document.getElementById('box').clientLeft;

// 获取元素相对于窗口的顶部偏移量
const clientTop = document.getElementById('box').clientTop;

// 获取元素的总宽度，包括内边距和边框
const clientWidth = document.getElementById('box').clientWidth;

// 获取元素的总高度，包括内边距和边框
const clientHeight = document.getElementById('box').clientHeight;