CSS 中的 offsetWidth、clientWidth、scrollWidth 和 Height 分别

在 CSS 中，偏移宽度（offsetWidth）、客户端宽度（clientWidth）、滚动宽度（scrollWidth）和高度（Height）是常用的属性，用于表示元素的尺寸和位置。这些属性在前端开发中经常会被用到，了解它们的含义和用法对于开发工作非常重要。

offsetWidth

offsetWidth 表示元素的物理宽度，包括了元素的左右边框、内边距和滚动条（如果存在滚动条的话）的宽度。如果没有设置边框和内边距，那么 offsetWidth 的值就等于元素的宽度。

.element {
  border: 1px solid #000;
  padding: 10px;
  overflow: auto;
}

<div class="element">Hello World</div>

const element = document.querySelector('.element');
console.log(element.offsetWidth);
// 输出为：22 (1px*2 + 10px*2 + 内容宽度)

clientWidth

clientWidth 表示元素的可见宽度，不包括元素的左右边框和滚动条的宽度。如果设置了内边距，那么 clientWidth 的值会减去左右边框的宽度和内边距的宽度。

.element {
  border: 1px solid #000;
  padding: 10px;
  overflow: auto;
}

<div class="element">Hello World</div>

const element = document.querySelector('.element');
console.log(element.clientWidth);
// 输出为：20 (10px*2 + 内容宽度)

scrollWidth

scrollWidth 表示元素的内容区域宽度，包括了不可见部分也是内容的一部分。如果元素不包含滚动条，那么 scrollWidth 就等于 clientWidth。

.element {
  border: 1px solid #000;
  padding: 10px;
  width: 50px;
  overflow: auto;
}

<div class="element">HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld</div>

const element = document.querySelector('.element');
console.log(element.scrollWidth);
// 输出为：540

scrollHeight

scrollHeight 表示元素的内容区域高度，包括了不可见部分也是内容的一部分。如果元素不包含滚动条，那么 scrollHeight 就等于 clientHeight。

.element {
  border: 1px solid #000;
  padding: 10px;
  height: 50px;
  overflow: auto;
}

<div class="element">HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld</div>

const element = document.querySelector('.element');
console.log(element.scrollHeight);
// 输出为：540

总之，这些属性是非常有用的，而且在很多场景下都能够派上用场。在实际开发中，需要根据具体的需求合理地使用它们，以达到设计的效果。