JS的 DOM 尺寸与位置属性

在 JavaScript 开发中，操作 DOM 元素的尺寸和位置是常见的任务，尤其是在实现动画、布局调整或响应式设计时。本文将全面解析 JavaScript 中与 DOM 尺寸和位置相关的属性，帮助你更好地理解和使用它们。

一、DOM 对象相关尺寸和位置属性

DOM 元素的尺寸和位置属性可以分为只读属性 和可读可写属性。这些属性在不同的场景下有着不同的用途。

只读属性

只读属性是 DOM 节点的固有属性，只能通过 JavaScript 获取，不能通过 JavaScript 设置。这些属性返回的值通常是不带单位的数字。

1. clientWidth 和 clientHeight

clientWidth 和 clientHeight 属性表示元素的可视部分宽度和高度，即 padding + content。它们不包括边框、滚动条和外边距。

<div id="container" class="container"></div>

.container {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid;
  overflow: auto;
  padding: 10px;
  margin: 20px;
}

var container = document.getElementById("container");
console.log("clientWidth:", container.clientWidth); // 220
console.log("clientHeight:", container.clientHeight); // 220

2. offsetWidth 和 offsetHeight

offsetWidth 和 offsetHeight 属性表示元素的 border + padding + content 的宽度和高度。它们包括边框和内边距，但不包括外边距。

var container = document.getElementById("container");
console.log("offsetWidth:", container.offsetWidth); // 222
console.log("offsetHeight:", container.offsetHeight); // 222

3. clientTop 和 clientLeft

clientTop 和 clientLeft 属性表示元素的边框宽度。它们通常用于计算元素的实际位置。

var container = document.getElementById("container");
console.log("clientTop:", container.clientTop); // 1
console.log("clientLeft:", container.clientLeft); // 1

4. offsetLeft 和 offsetTop

offsetLeft 和 offsetTop 属性表示元素相对于其 offsetParent 的左上角的距离。offsetParent 是元素的最近的定位祖先元素，如果没有定位祖先，则为 body。

<div id="container" class="container">
  <div id="item" class="item"></div>
</div>

.container {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid;
  overflow: auto;
  padding: 10px;
  margin: 20px;
  position: relative;
}
.item {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  left: 100px;
  top: 100px;
}

var container = document.getElementById("container");
var item = document.getElementById("item");
console.log(item.offsetParent); // container 盒子 dom 对象
console.log(item.offsetLeft); // 100
console.log(item.offsetTop); // 100

5. scrollHeight 和 scrollWidth

scrollHeight 和 scrollWidth 属性表示元素内部内容的实际宽度和高度。如果内容没有超出元素的可视区域，则这两个属性的值与 clientWidth 和 clientHeight 相同。

<div id="container" class="container">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla repellat porro atque culpa rem sunt sed! Voluptates vel incidunt accusamus reiciendis aut, adipisci ut. Hic, impedit officia.Quis, animi beatae. Facere dolorum quasi laborum, rem facilis illum necessitatibus sint doloribus beatae exercitationem sapiente! Quod vel cupiditate quam libero, delectus natus.</div>

var container = document.getElementById("container");
console.log("scrollWidth:", container.scrollWidth); // 220
console.log("scrollHeight", container.scrollHeight); // 372

可读可写属性

可读可写属性不仅可以被 JavaScript 获取，还可以被 JavaScript 设置。

1. scrollTop 和 scrollLeft

scrollTop 和 scrollLeft 属性表示元素被卷起的高度和宽度。它们通常用于实现滚动效果。

<div id="container" class="container">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla repellat porro atque culpa rem sunt sed! Voluptates vel incidunt accusamus reiciendis aut, adipisci ut. Hic, impedit officia.Quis, animi beatae. Facere dolorum quasi laborum, rem facilis illum necessitatibus sint doloribus beatae exercitationem sapiente! Quod vel cupiditate quam libero, delectus natus.</div>

var container = document.getElementById("container");
container.onscroll = function () {
  console.log("scrollTop:", container.scrollTop);
  console.log("scrollLeft", container.scrollLeft);
}

2. domObj.style.xxx

domObj.style.xxx 属性用于获取或设置 DOM 元素的行内样式。需要注意的是，这种方式只能获取行内样式，而不能获取最终计算好的样式。如果需要获取计算好的样式，可以使用 getComputedStyle。

var container = document.getElementById("container");
console.log(container.style.width); // 获取行内样式
container.style.width = "300px"; // 设置行内样式

二、Event 对象相关尺寸和位置属性

在处理事件时，event 对象也提供了许多与尺寸和位置相关的属性。这些属性在实现交互效果时非常有用。

1. clientX 和 clientY

clientX 和 clientY 属性表示鼠标点击位置相对于浏览器可视区的坐标。

<div id="container" class="container"></div>

var container = document.getElementById("container");
container.onclick = function (ev) {
  var evt = ev || event;
  console.log("clientX:", evt.clientX);
  console.log("clientY:", evt.clientY);
}

2. screenX 和 screenY

screenX 和 screenY 属性表示鼠标点击位置相对于屏幕的坐标。

var container = document.getElementById("container");
container.onclick = function (ev) {
  var evt = ev || event;
  console.log("screenX:", evt.screenX);
  console.log("screenY:", evt.screenY);
}

3. offsetX 和 offsetY

offsetX 和 offsetY 属性表示鼠标点击位置相对于事件源（即触发事件的 DOM 元素）的坐标。

var container = document.getElementById("container");
container.onclick = function (ev) {
  var evt = ev || event;
  console.log("offsetX:", evt.offsetX);
  console.log("offsetY:", evt.offsetY);
}

4. pageX 和 pageY

pageX 和 pageY 属性表示鼠标点击位置相对于页面的坐标。当页面有滚动条时，pageX 和 pageY 会考虑滚动的距离。

var container = document.getElementById("container");
container.onclick = function (ev) {
  var evt = ev || event;
  console.log("pageX:", evt.pageX);
  console.log("pageY:", evt.pageY);
}