编辑“︁JavaScript DOM尺寸位置”︁（章节）

= JavaScript DOM尺寸位置 =

== 介绍 ==
DOM（文档对象模型）尺寸和位置是指通过JavaScript获取和操作HTML元素在页面中的几何属性，包括宽度、高度、坐标等信息。这些属性常用于动态布局、响应式设计、拖拽功能等场景。理解DOM尺寸和位置是前端开发的基础之一。

== 核心属性与方法 ==

=== 元素尺寸 ===
* '''clientWidth/clientHeight'''：元素的可见宽度和高度（包括内边距，但不包括边框、外边距和滚动条）。
* '''offsetWidth/offsetHeight'''：元素的布局宽度和高度（包括内边距、边框和滚动条，但不包括外边距）。
* '''scrollWidth/scrollHeight'''：元素内容的实际宽度和高度（包括溢出部分）。

=== 元素位置 ===
* '''clientTop/clientLeft'''：元素上边框和左边框的宽度。
* '''offsetTop/offsetLeft'''：元素相对于其定位父元素的顶部和左侧偏移量。
* '''getBoundingClientRect()'''：返回元素的大小及其相对于视口的位置。

=== 视口与滚动 ===
* '''window.innerWidth/window.innerHeight'''：视口的宽度和高度（包括滚动条）。
* '''window.scrollX/window.scrollY'''：文档水平/垂直滚动的像素值。

== 代码示例 ==

=== 获取元素尺寸 ===
<syntaxhighlight lang="javascript">
const element = document.getElementById('example');

console.log('clientWidth:', element.clientWidth);
console.log('clientHeight:', element.clientHeight);
console.log('offsetWidth:', element.offsetWidth);
console.log('offsetHeight:', element.offsetHeight);
</syntaxhighlight>

输出示例：
<pre>
clientWidth: 300
clientHeight: 200
offsetWidth: 320
offsetHeight: 220
</pre>

=== 获取元素位置 ===
<syntaxhighlight lang="javascript">
const element = document.getElementById('example');
const rect = element.getBoundingClientRect();

console.log('Top:', rect.top);
console.log('Left:', rect.left);
console.log('Bottom:', rect.bottom);
console.log('Right:', rect.right);
</syntaxhighlight>

输出示例：
<pre>
Top: 50
Left: 100
Bottom: 250
Right: 350
</pre>

== 实际应用案例 ==

=== 案例1：检测元素是否在视口中 ===
<syntaxhighlight lang="javascript">
function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
    );
}
</syntaxhighlight>

=== 案例2：动态调整元素大小 ===
<syntaxhighlight lang="javascript">
window.addEventListener('resize', function() {
    const element = document.getElementById('responsive-element');
    element.style.width = `${window.innerWidth * 0.8}px`;
});
</syntaxhighlight>

== 图表说明 ==

<mermaid>
graph TD
    A[DOM元素] --> B[clientWidth/clientHeight]
    A --> C[offsetWidth/offsetHeight]
    A --> D[scrollWidth/scrollHeight]
    A --> E[getBoundingClientRect]
    E --> F[top, left, right, bottom]
</mermaid>

== 数学公式 ==

计算元素中心点坐标：
<math>
\text{centerX} = \text{left} + \frac{\text{width}}{2}
</math>
<math>
\text{centerY} = \text{top} + \frac{\text{height}}{2}
</math>

== 注意事项 ==
* 某些属性（如offsetTop）的值受父元素的定位方式影响。
* 在CSS transform后，getBoundingClientRect()返回的值会包含变换后的几何信息。
* 频繁读取这些属性可能导致性能问题，建议使用requestAnimationFrame进行优化。

== 总结 ==
JavaScript DOM尺寸和位置是操作页面布局的重要基础。通过client/offset/scroll系列属性和getBoundingClientRect()方法，开发者可以精确控制元素在页面中的表现。理解这些概念对实现复杂的交互效果至关重要。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]