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) 在哪里。
最佳答案
这是因为您正在尝试使用 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>
关于javascript - 计算span的scrollWidth,offsetWidth,clientWidth的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64321430/