网站没有流量app推广项目
目录
client 家族与 offset 家族
一、client 家族：内容区域 + 内边距
示例代码
应用场景
二、offset 家族：内容区域 + 内边距 + 边框 + 滚动条
示例代码
应用场景
三、综合应用场景
1. 动态调整元素高度
2. 拖拽元素
3. 判断元素是否在视口内
四、注意事项
五、总结
getBoundingClientRect()
一、DOMRect 对象属性
二、关键特性
1. 相对视口坐标系
2. 包含边框和内边距
3. 兼容性与性能
三、与其他方法的对比
四、代码示例
示例：电梯导航
client 家族与 offset 家族
在 JavaScript 中，元素的尺寸和位置信息可通过 client 和 offset 系列属性获取。这两组属性分别描述了元素不同维度的几何特征，适用于动态布局、拖拽交互、滚动计算等场景。
一、client 家族：内容区域 + 内边距
| 属性 | 说明 |
|---|---|
clientWidth | 元素内容区域的宽度 + 左右内边距（不包含滚动条、边框、外边距） |
clientHeight | 元素内容区域的高度 + 上下内边距（不包含滚动条、边框、外边距） |
clientTop | 元素上边框的宽度（等同于 border-top-width） |
clientLeft | 元素左边框的宽度（等同于 border-left-width） |
示例代码
const box = document.querySelector('.box');
console.log('内容宽度:', box.clientWidth); // 内容 + padding
console.log('上边框宽度:', box.clientTop); // 上边框宽度应用场景
-
计算元素内部可用空间（如文本容器）。
-
动态调整内容区域大小（结合滚动条状态）。
二、offset 家族：内容区域 + 内边距 + 边框 + 滚动条
| 属性 | 说明 |
|---|---|
offsetWidth | 元素总宽度（内容 + 内边距 + 边框 + 垂直滚动条宽度，若存在） |
offsetHeight | 元素总高度（内容 + 内边距 + 边框 + 水平滚动条高度，若存在） |
offsetTop | 元素上外边框距离最近定位父元素（或文档）上内边框的垂直距离 |
offsetLeft | 元素左外边框距离最近定位父元素（或文档）左内边框的水平距离 |
offsetParent | 元素的最近定位祖先元素（position 不为 static，若没有则指向 body） |
示例代码
const box = document.querySelector('.box');
console.log('元素总宽度:', box.offsetWidth); // 内容 + padding + border + 滚动条
console.log('距离父元素顶部:', box.offsetTop);应用场景
-
获取元素的完整尺寸（包含边框和滚动条）。
-
计算元素在文档中的绝对位置（结合
offsetParent）。
三、综合应用场景
1. 动态调整元素高度
// 根据窗口高度调整容器高度
function adjustHeight() {const viewportHeight = window.innerHeight;const headerHeight = document.querySelector('header').offsetHeight;const container = document.querySelector('.container');container.style.height = `${viewportHeight - headerHeight}px`;
}
window.addEventListener('resize', adjustHeight);2. 拖拽元素
let isDragging = false;
let startX, startY, initialX, initialY;document.querySelector('.draggable').addEventListener('mousedown', (e) => {isDragging = true;const rect = e.target.getBoundingClientRect();initialX = rect.left; // 元素当前文档位置initialY = rect.top;startX = e.clientX; // 鼠标按下位置startY = e.clientY;
});document.addEventListener('mousemove', (e) => {if (!isDragging) return;const deltaX = e.clientX - startX;const deltaY = e.clientY - startY;e.target.style.left = `${initialX + deltaX}px`;e.target.style.top = `${initialY + deltaY}px`;
});document.addEventListener('mouseup', () => {isDragging = false;
});3. 判断元素是否在视口内
function isElementInViewport(el) {const rect = el.getBoundingClientRect();return (rect.top >= 0 &&rect.left >= 0 &&rect.bottom <= window.innerHeight &&rect.right <= window.innerWidth);
}四、注意事项
-
布局抖动：频繁读取尺寸属性（如
offsetWidth）会强制浏览器重排，应尽量减少读取次数。 -
隐藏元素：若元素为
display: none，其尺寸属性值为0。 -
小数精度：部分浏览器返回的尺寸值可能是小数，需按需取整。
-
边框与滚动条：滚动条的存在会影响
clientWidth和offsetWidth的值。
五、总结
-
client系列：关注元素内容与内边距，适合内部空间计算。 -
offset系列：包含边框和滚动条，用于获取元素整体占位或定位。 -
scroll系列：处理内容滚动与溢出部分。 -
组合使用：结合
getBoundingClientRect()或offsetParent实现精准布局控制。
getBoundingClientRect()
Element.getBoundingClientRect() 是 JavaScript 中用于获取元素精确尺寸和位置的核心方法。它返回一个 DOMRect 对象，包含元素相对于浏览器视口（viewport）的几何信息，适用于动态布局计算、滚动检测、交互定位等场景。
一、DOMRect 对象属性
调用 getBoundingClientRect() 返回的对象包含以下属性（单位：像素）：
| 属性 | 说明 |
|---|---|
x/left | 元素左边界到视口左侧的距离（x 是 left 的别名，兼容性稍差） |
y/top | 元素上边界到视口顶部的距离（y 是 top 的别名，兼容性稍差） |
right | 元素右边界到视口左侧的距离（right = left + width） |
bottom | 元素下边界到视口顶部的距离（bottom = top + height） |
width | 元素的宽度（包含 padding + border，不包含 margin） |
height | 元素的高度（包含 padding + border，不包含 margin） |
二、关键特性
1. 相对视口坐标系
-
所有值基于视口左上角计算，页面滚动会改变结果（视口位置动态变化）。
-
转换为文档坐标（绝对位置）：
const rect = element.getBoundingClientRect(); const absoluteLeft = rect.left + window.scrollX; const absoluteTop = rect.top + window.scrollY;
2. 包含边框和内边距
-
width和height包含元素的padding和border，与offsetWidth/offsetHeight一致。 -
对比其他尺寸属性：
属性 包含内容 clientWidth内容 + padding（不含边框/滚动条） offsetWidth内容 + padding + border scrollWidth实际内容宽度（含溢出部分）
3. 兼容性与性能
-
兼容性：所有现代浏览器均支持，包括 IE9+。
-
性能：频繁调用可能触发重排（reflow），建议缓存结果或使用优化策略（如防抖）。
三、与其他方法的对比
| 方法 | 特点 |
|---|---|
offsetTop/offsetLeft | 返回相对于最近定位父元素的偏移，不提供完整尺寸信息 |
clientWidth/clientHeight | 仅包含内容 + padding，无位置信息 |
scrollIntoView() | 滚动元素到视口，但无法直接获取位置数据 |
四、代码示例
const element = document.getElementById('target');
const rect = element.getBoundingClientRect();console.log('元素尺寸:', rect.width, 'x', rect.height);
console.log('视口内位置:', rect.left, rect.top);
console.log('文档绝对位置:', rect.left + window.scrollX, rect.top + window.scrollY);示例：电梯导航
<!-- 电梯 --><div class="xtx-elevator"><ul class="xtx-elevator-list"><li><a href="javascript:;" data-name="new">新鲜好物</a></li><li><a href="javascript:;" data-name="popular">人气推荐</a></li><li><a href="javascript:;" data-name="brand">热门品牌</a></li><li><a href="javascript:;" data-name="topic">最新专题</a></li><li><a href="javascript:;" data-name="backTop"><i class="sprites"></i>顶部</a></li></ul></div><script>//导航隐藏与显示const elevator = document.querySelector('.xtx-elevator')const entry = document.querySelector('.xtx_entry')window.addEventListener('scroll', function () {let scrolltop = document.documentElement.scrollTopelevator.style.opacity = scrolltop > entry.offsetTop ? 1 : 0})function clear() {if (document.querySelector('.xtx-elevator .active'))document.querySelector('.xtx-elevator .active').classList.remove('active')}//点击导航跳转const ul = document.querySelector('.xtx-elevator-list')ul.addEventListener('click', function (e) {clear()e.target.classList.add('active')if (e.target.dataset.name === 'backTop') {document.documentElement.scrollTop = 0}else {const distance = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTopdocument.documentElement.scrollTop = distance}})//页面滚动更新导航const newsTop = Math.floor(document.querySelector('.xtx_goods_new').offsetTop)const popularTop = Math.floor(document.querySelector('.xtx_goods_popular').offsetTop)const brandTop = Math.floor(document.querySelector('.xtx_goods_brand').offsetTop)const topicTop = Math.floor(document.querySelector('.xtx_goods_topic').offsetTop)window.addEventListener('scroll', function () {let scrolltop = document.documentElement.scrollTopclear()if (scrolltop >= newsTop && scrolltop < popularTop) {document.querySelector('[data-name = new]').classList.add('active')}else if (scrolltop >= popularTop && scrolltop < brandTop) {document.querySelector('[data-name = popular]').classList.add('active')}else if (scrolltop >= brandTop && scrolltop < topicTop) {document.querySelector('[data-name = brand]').classList.add('active')}else if (scrolltop >= topicTop) {document.querySelector('[data-name = topic]').classList.add('active')}})</script>