对内联元素使用ScrollWidth

Question

我在获取div中的内容的精确宽度方面有问题，div中的内容(内容)有时较小，但有时大于视口(溢出是隐藏的)。这个问题与JS-方法的填充/边距/边框问题无关。

clientWidth和offsetWidth只返回内容的可查看宽度，在我的示例中是viewport宽度，因为div是块级元素。

如果div扩展了viewport，scrollWidth将给我内容的宽度，但是如果div较小，它将给我视口宽度。原因是它总是返回较大数量的内容宽度和元素宽度。

我正在寻找一个方法，它总是返回内容的宽度！此外，我不能仅仅将div设置为内联并使用scrollWidth()，因为这将始终返回0(不适用于内联)。

因此，基本上，只要内容大于视口，scrollWidth就能为我工作。你有什么意见建议？如果情况还不清楚，我会做个广告。

编辑

基本上，我只是问如何使用ScrollWidth作为内联元素，但没有正确地理解它。

Answer 1

如果css规则强制某个元素扩展其宽度，scrollWidth将返回完整宽度。我认为解决方案是确保您的元素不被css扩展。

以这个例子为例。第一个div有display: inline-block，不会扩展它的大小。第二个div具有默认的display: block，并将跨越其相对定位的父级的宽度。

点击“展开片段/完整页面”并调整窗口大小以查看结果。

​

var to = null;
var log = function() {
  console.log("Width 1: ", document.querySelector(".div1").scrollWidth); 
  
  console.log("Width 2: ", document.querySelector(".div2").scrollWidth);  
}

window.addEventListener("resize", function() {
  clearTimeout(to);
  
  to = setTimeout(log, 500);
});

div {
  border: 1px solid red;
  max-width: 100%;
  max-height: 40px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.div1 {
  display: inline-block;
  
}

.div2 {
  
}

<div class="div1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis diam nec arcu consequat rhoncus.
</div>

<div class="div2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis diam nec arcu consequat rhoncus.
</div>

​

Answer 2

您可以使用以下jquery方法

.height()盒的高度(无边距、边框、填充)

.width()框的宽度(无边距、边框、填充)

.innerHeight()盒高加填充

.innerWidth()盒的宽度加填充

.outerHeight()盒高加填充和边框

盒的.outerWidth()宽度加上填充和边框

.outerHeight() (真)框的高度加上填充、边框和边距

.outerWidth() (真)框的宽度加上填充、边框和边距

Answer 3

如果我正确地回答了您的问题，下面的函数将查看scrollWidth，如果它大于clientWidth，这意味着它是溢出的，否则它是完全可见的或更小的。你能试试看让我知道吗？希望能帮上忙。

function getAbsoluteWidth(elementIdentifier) {
var $elem=document.getElementById(elementIdentifier);

if($elem.scrollWidth>$elem.clientWidth){
    return $elem.scrollWidth;
}

return $elem.clientWidth;
}