javascript - 计算span的scrollWidth,offsetWidth,clientWidth的值

Question

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

an introduction on scrollWidth,offsetWidth,clientWidth in detail

例子中border,padding,margin都设置为0，overflow被隐藏，imgbox1图片之间有空白，imgbox2没有空白。点击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="/image/b7J9w.jpg" alt=""></a>
        <a href=""><img src="/image/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="/image/5uIog.jpg" alt=""></a>
        <a href=""><img src="/image/r5GCW.jpg" alt=""></a>
    </span>
</div>
<br>
<div id="imgbox2">
  <span id="span2"><a href=""><img src="/image/b7J9w.jpg" alt=""></a><a href=""><img src="/image/yh7YJ.jpg" alt=""></a><a href=""><img src="/image/5uIog.jpg" alt=""></a><a href=""><img src="/image/r5GCW.jpg" alt=""></a>
    </span>
</div>

我们得到了输出

span1.scrollWidth 39 
span2.scrollWidth 10

如何解释 scrollWidth在span1是 39px 而 scrollWidth在span2是10px？为什么scrollWidth在span1不是 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="/image/b7J9w.jpg" alt=""></a>
        <a href=""><img src="/image/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="/image/5uIog.jpg" alt=""></a>
        <a href=""><img src="/image/r5GCW.jpg" alt=""></a>
    </span>
</div>

我们得到输出:

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

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

Answer 1

这是因为您正在尝试使用 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="/image/b7J9w.jpg" alt=""></a>
        <a href=""><img src="/image/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="/image/5uIog.jpg" alt=""></a>
        <a href=""><img src="/image/r5GCW.jpg" alt=""></a>
    </span>
</div>