计算span的scrollWidth,offsetWidth,clientWidth的值

Question

Element.scrollWidth 只读属性是对元素内容宽度的度量，包括由于 overflow.The post 在屏幕上不可见的内容SO详细介绍了scrollWidth,offsetWidth,clientWidth

Border,padding,margin 都设置为零并且溢出被隐藏在例子中，在imgbox1中图像之间有白色space，在imgbox2.Click中没有白色space Run code snippet 在 Firefox 中。

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" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></a>
    </span>
</div>
<br>
<div id="imgbox2">
  <span id="span2"><a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" alt=""></a><a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a><a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a><a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></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" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></a>
    </span>
</div>

我们得到输出：

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

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

Answer 1

您在“imgbox1”的图像之间得到 spaces 的原因是因为元素之间有 spaces（换行符和几个制表符算作 space，明确一点）。

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

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

Answer 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" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></a>
    </span>
</div>

计算span的scrollWidth,offsetWidth,clientWidth的值

Calculate the value of span's scrollWidth,offsetWidth,clientWidth

javascript

css

width

演示：