Question

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

HTML：

<div id='box1'>
<div id='box2'>
</div>
</div>
<p id="w"></p>
<p id="iw"></p>

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 - 容器，此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?

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

所以用函数得到这个值：

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

Answer 2

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

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

如果你想查找box1内容的宽度，无论滚动条如何，你可能都希望找到$('#box1')[0].scrollWidth。如果您正在寻找可用的宽度并在框1中显示，那么您正在寻找$('#box1')[0].clientWidth。

我分叉你的小提琴，这样你就可以看到两者都在行动。 http://jsfiddle.net/arosen/xp9hD/

Answer 3

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

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

saveDiv.innerWidth会给你0

Answer 4

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

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

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

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

4 个答案: