计算span的scrollWidth,offsetWidth,clientWidth的值

Posted 2023-03-05

【中文标题】计算span的scrollWidth,offsetWidth,clientWidth的值

【英文标题】：Calculate the value of span's scrollWidth,offsetWidth,clientWidth

【发布时间】：2021-01-26 23:28:21

【问题描述】：

Element.scrollWidth 只读属性是元素内容宽度的度量，包括因溢出而在屏幕上不可见的内容。SO 中的帖子对scrollWidth,offsetWidth,clientWidth 有详细介绍

an introduction on scrollWidth,offsetWidth,clientWidth in detail

Border , padding ,margin 全部设置为零，示例中隐藏了溢出，imgbox1中图片之间有空白，imgbox2中没有空白。在firefox中点击Run code snippet。

var imgbox1 = document.getElementById("imgbox1");
imgbox1.innerhtml += imgbox1.innerHTML;
var span1 = document.getElementById("span1");
console.log("span1.scrollWidth " + span1.scrollWidth);
var imgbox2 = document.getElementById("imgbox2");
imgbox2.innerHTML += imgbox2.innerHTML;
var span2 = document.getElementById("span2");
console.log("span2.scrollWidth " + span2.scrollWidth);

* 
  padding: 0px;
  margin: 0px;
  border: 0px;


div 
  border: 0px;
  width: 933px;
  height: 129px;
  overflow: hidden;
  white-space: nowrap;

<div id="imgbox1">
  <span id="span1">
        <a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" ></a>
    </span>
</div>
<br>
<div id="imgbox2">
  <span id="span2"><a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" ></a><a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" ></a><a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" ></a><a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" ></a>
    </span>
</div>

我们得到了输出

span1.scrollWidth 39 
span2.scrollWidth 10

如何解释span1中的scrollWidth是39px，而span2中的scrollWidth是10px？为什么span1中的scrollWidth不是40px。

window.onload = function() 
  var imgbox = document.getElementById("imgbox");
  imgbox.innerHTML += imgbox.innerHTML;
  var span = imgbox.getElementsByTagName("span");
  console.log("span[0].offsetWidth " + span[0].offsetWidth);
  console.log("imgbox.scrollWidth - imgbox.clientWidth " + (imgbox.scrollWidth - imgbox.clientWidth));

* 
  border: 0px;
  margin: 0px;
  padding: 0px;


div 
  width: 933px;
  height: 129px;
  overflow: hidden;
  white-space: nowrap;

<div id="imgbox">
  <span>
        <a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" ></a>
    </span>
</div>

我们得到输出：

span[0].offsetWidth 943 
imgbox.scrollWidth - imgbox.clientWidth 942

请指出它们之间的 1 px 差异 (943-942) 在哪里。

【问题讨论】：

如果您将 span 更改为 div（或将其更改为 display:block），您将得到 scrollWidth，因为 display:inline 元素似乎没有返回正确的 scrollWidth 值。此外，第一行中的空白是由每个链接后的回车引起的。

【参考方案1】：

在“imgbox1”处的图像之间有空格的原因是元素之间有空格（为了清楚起见，换行符和几个制表符算作空格）。

但在另一个“imgbox2”上没有空格，因为图像之间没有换行符。

<div id="imgbox1">
  <span id="span1">
      <a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" ></a><a
         href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" ></a><a
         href=""><img src="https://i.stack.imgur.com/5uIog.jpg" ></a><a
         href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" ></a>
  </span>
</div>
<br>
<div id="imgbox2">
  <span id="span2"><a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" ></a><a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" ></a><a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" ></a><a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" ></a>
  </span>
</div>

【讨论】：

请从imgbox 计算值39，从imgbox2 计算值10。

【参考方案2】：

这是因为您尝试使用 span 标记作为容器。因为它是默认的display: inline-block。它没有应用与您在图像中显示的相同的计算。该图像描述了display: block; 元素的所有宽度。

每个显示都有自己的宽度规则。极端地说，如果你申请display: none;，你不能指望与你的图片中的规则相同。

所以设置display: block 并遵守规则：

span
  display: block;

无论如何你都不会有任何问题。

演示：

window.onload = function() 
  var imgbox = document.getElementById("imgbox");
  imgbox.innerHTML += imgbox.innerHTML;
  var span = imgbox.getElementsByTagName("span");
  console.log("span[0].offsetWidth " + span[0].offsetWidth, '\n', "imgbox.scrollWidth - imgbox.clientWidth " + (imgbox.scrollWidth - imgbox.clientWidth));

* 
  border: 0px;
  margin: 0px;
  padding: 0px;


div 
  width: 933px;
  height: 129px;
  overflow: hidden;
  white-space: nowrap;

span
  display: block;

<div id="imgbox">
  <span>
        <a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" ></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" ></a>
    </span>
</div>