如何在jquery中获取元素的innerWidth而不使用滚动条

给定一个包含滚动条的div（例如溢出的b / c：auto），如何获得元素的准确innerWidth？ 在我的例子中： http ： //jsfiddle.net/forgetcolor/2J7NJ/ width和innerWidth报告相同的宽度。 我想要的数字应该少于100。

HTML：

 
 
 
 
 
​ 

CSS：

 #box1 { width:100px; height:100px; overflow:auto; } #box2 { width:200px; height:200px; background-color:#aaa; } 

使用Javascript：

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

更新：

当box2 div包含一个大图像时（因此需要一秒钟加载），我需要这个工作。 这是一个例子，集成了以下解决方案之一（Lukx’），这不起作用： http ： //jsfiddle.net/forgetcolor/rZSCg/1/ 。 任何想法如何让它在计算宽度之前等待图像加载？

Answer 1

通过将新DIV插入#box1 -Container，此DIV将获得可用宽度 – 读取其宽度将返回一个看似正确的值。

HTML和CSS都保持不变

JS成了

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

我也分叉你的小提琴，看看我做了什么： http ： //jsfiddle.net/xc9xQ/2/

所以用函数得到这个值：

 function widthWithoutScrollbar(selector) { var tempDiv = $("
"); $(selector).append(tempDiv); var elemwidth = tempDiv.width(); tempDiv.remove(); return elemwidth; }; //Example console.log($('#page').width()); // 1280 console.log(widthWithoutScrollbar('#page')); // 1265 

Answer 2

我不确定你在找什么，但我相信它是id为box1的div的scrollWidth或clientWidth 。

两者都是JavaScript属性，不需要jQuery来检索，但可以使用以下$('#box1')[0]在jQuery中获取。 所有这一切都是从jQuery选择器返回第一个（如果你只使用ID）DOM元素。

如果你想找出box1内容的宽度而不管滚动条你可能想找到$('#box1')[0].scrollWidth 。 如果您正在寻找可用的宽度并在 box1中显示，那么您正在寻找$('#box1')[0].clientWidth 。

我分叉你的小提琴，所以你可以看到两个在行动。 http://jsfiddle.net/arosen/xp9hD/

Answer 3

您可以通过复制原始div来制作另一个div，然后获得宽度等。例如：

 var saveDiv = $('
').html($('#box2').html()); 

saveDiv.innerWidth会给你0

Answer 4

如果普通javascript中的解决方案没问题，你可以使用david walsh所描述的技术： http ： //davidwalsh.name/detect-scrollbar-width

我分叉你的小提琴并实现它： http ： //jsfiddle.net/jnaO/z9btp/

但同样，这不是使用jQuery，只是javascript。