如何在没有滚动条的情况下获取jquery中元素的innerWidth

给定一个有滚动条的div（例如b/c of overflow:auto），如何获得元素的准确innerWidth？在我的示例中：width和innerWidth报告相同的宽度。我要的数字应该少于100

HTML:

Javascript:

$('#w').text("width is: "+$('#box1').width());
$('#iw').text("inner width is: "+$('#box1').innerWidth());​

更新：

---

当box2 div包含一个大图像时（因此，加载需要一秒钟），我需要这样做。下面是一个示例，它集成了下面的一个解决方案（Lukx'），但不起作用：。如何让它在计算宽度之前等待图像加载？

您可以通过复制原始div来创建另一个div，然后获取宽度等。类似于：

var saveDiv = $('<div />').html($('#box2').html());

var saveDiv=$（''）.html（$（'#box2'）.html（））；

---

saveDiv.innerWidth将为您提供0

通过在

#box1

-容器中插入一个新的DIV，该DIV将获得可用的宽度，读取其宽度将返回一个看起来正确的值

HTML和CSS都保持不变

JS变成

var helperDiv = $('<div />');
$('#box1').append(helperDiv);

$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();​​​​​​​​​​​​​​​​​​​​​​​​​​​ // because we dont need it anymore, do we?

var helperDiv=$（''）；
$（'#box1'）。追加（helperDiv）；
$（'#iw'）.text（“内部宽度为：“+helperDiv.width（））；
helperDiv.remove（）；​​​​​​​​​​​​​​​​​​​​​​​​​​​ // 因为我们不再需要它了，是吗？

我还用叉子叉了叉你的小提琴，看看我做了什么：

因此，要使用函数获取此值：

function widthWithoutScrollbar(selector) {
  var tempDiv = $("<div/>");
  $(selector).append(tempDiv);
  var elemwidth = tempDiv.width();
  tempDiv.remove();
  return elemwidth;
};

//Example
console.log($('#page').width());  // 1280
console.log(widthWithoutScrollbar('#page'));  // 1265

不带Crollbar的函数宽度（选择器）{
var tempDiv=$（“”）；
$（选择器）.append（tempDiv）；
var elemwidth=tempDiv.width（）；
tempDiv.remove（）；
返回elemwidth；
};
//范例
console.log（$（'#page'）.width（））；//1280
console.log（宽度不带横线（“#页”）；//1265

如果纯javascript解决方案还可以，您可以使用david walsh描述的技术：

我用叉子叉了叉你的小提琴，然后开始演奏：

---

但是，这并不是使用jQuery，而是使用javascript。

我不确定您到底在寻找什么，但我相信它可能是id为box1的div的

scrollWidth

或

clientWidth

这两个属性都是JavaScript属性，不需要jQuery进行检索，但可以在jQuery中使用以下

$（'#box1'）[0]

进行抓取。所有这些操作都是从jQuery选择器返回第一个（如果使用的是ID，则仅返回）DOM元素

如果要查找box1内容的宽度，而不考虑滚动条，则可能要查找

$（'#box1'）[0]。滚动宽度

。如果要查找框1中显示的可用宽度，请查找

$（'#框1'）[0]。clientWidth

---

我用叉子叉了你的小提琴，这样你就可以看到两者都起作用了

innerWidth与滚动条无关。而且，由于滚动条的大小（和可见性）会因所使用的浏览器和操作系统而异，因此每次您都会得到不同的答案。您可能应该考虑其他解决方案，以解决您真正的问题。另请参见：尽管我会打赌反对它，但这在IE7中仍然有效；-）除非div包含一个大的映像（假定是因为加载时间）。你知道如何让它在b/c加载时间内工作吗？瞧，怎么让它等着装货？分叉示例：有趣的方法。在我的例子中，我不能指望滚动条总是在div中，所以需要获取其当前状态的动态值。但也许我可以检测到它的存在并使用这个想法。你可以将测量结果封装在一个if语句中，该语句只计算滚动条的宽度，如果内框大于外框，我已经更新了小提琴（相同的地址）。clientWidth不需要额外的html标记，在IE 8中工作，因此，在我看来，这比公认的答案要好+meNo中的1需要访问确切的元素。只需使用JQuery读取属性：$（'#box1'）.prop（'clientWidth'））

var helperDiv = $('<div />');
$('#box1').append(helperDiv);

$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();​​​​​​​​​​​​​​​​​​​​​​​​​​​ // because we dont need it anymore, do we?

function widthWithoutScrollbar(selector) {
  var tempDiv = $("<div/>");
  $(selector).append(tempDiv);
  var elemwidth = tempDiv.width();
  tempDiv.remove();
  return elemwidth;
};

//Example
console.log($('#page').width());  // 1280
console.log(widthWithoutScrollbar('#page'));  // 1265