JavaScript中的各种宽高属性的实现

讲解"JavaScript中的各种宽高属性的实现"。

在JavaScript中，我们可以利用不同的属性来获取元素或元素内容的宽高，下面是一些常用的实现方式：

元素的宽高属性

offsetWidth 和 offsetHeight

offsetWidth 和 offsetHeight 属性是一个元素在包括边框和滚动条在内的整体高度和宽度，返回的单位是像素值。

<div id="box" style="width: 100px; height: 100px; border: 1px solid black; overflow: scroll;">
  <p style="width: 200px; height: 200px;"></p>
</div>
<script>
  const box = document.querySelector("#box");
  console.log(box.offsetWidth); // 输出 102 （100+1+1）
  console.log(box.offsetHeight); // 输出 102 （100+1+1）
</script>

clientWidth 和 clientHeight

clientWidth 和 clientHeight 属性是一个元素的可视宽度和高度，不包括边框和滚动条，在计算中包括 padding 值，返回的单位是像素值。

<div id="box" style="width: 100px; height: 100px; border: 1px solid black; padding: 10px; overflow: scroll;">
  <p style="width: 200px; height: 200px;"></p>
</div>
<script>
  const box = document.querySelector("#box");
  console.log(box.clientWidth); // 输出 122 （100+10+12）
  console.log(box.clientHeight); // 输出 122 （100+10+12）
</script>

scrollWidth 和 scrollHeight

scrollWidth 和 scrollHeight 属性是一个元素的包括滚动条在内的完整高度和宽度，返回的单位是像素值。

<div id="box" style="width: 100px; height: 100px; border: 1px solid black; overflow: scroll;">
  <p style="width: 200px; height: 200px;"></p>
</div>
<script>
  const box = document.querySelector("#box");
  console.log(box.scrollWidth); // 输出 202 （100+200+1）
  console.log(box.scrollHeight); // 输出 202 （100+200+1）
</script>

元素内容的宽高属性

offsetWidth 和 offsetHeight

offsetWidth 和 offsetHeight 属性在获取元素内容宽度和高度时可以不设置边框。

<p id="paragraph" style="width: 200px; height: 200px;"></p>
<script>
  const paragraph = document.querySelector("#paragraph");
  console.log(paragraph.offsetWidth); // 输出 200
  console.log(paragraph.offsetHeight); // 输出 200
</script>

scrollWidth 和 scrollHeight

scrollWidth 和 scrollHeight 属性在获取元素内容宽度和高度时也可以不设置边框。

<p id="paragraph" style="width: 200px; height: 200px; overflow: scroll"></p>
<script>
  const paragraph = document.querySelector("#paragraph");
  console.log(paragraph.scrollWidth); // 输出 220 （200+20）
  console.log(paragraph.scrollHeight); // 输出 220 （200+20）
</script>

以上就是常用的获取元素和元素内容宽高属性的实现方式，可以根据不同的需求自行选择合适的属性来获取宽高值。