8

给定一个包含滚动条的 div（例如溢出的 b/c：auto），我如何获得元素的准确内部宽度？在我的示例中：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/。任何想法如何让它在计算宽度之前等待图像加载？

4

4 回答 4

16

通过将一个新的 DIV 插入到#box1-Container 中，这个 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
于 2012-05-21T21:29:24.327 回答
11

我不确定您到底在寻找什么，但我相信它是id 为 box1 的 divscrollWidth或clientWidthdiv。

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

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

我叉了你的小提琴，这样你就可以看到两者的作用。http://jsfiddle.net/arosen/xp9hD/

于 2012-05-21T23:06:09.190 回答
1

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

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

saveDiv.innerWidth 会给你 0

于 2012-05-21T21:10:00.093 回答
0

如果纯 javascript 中的解决方案可以，您可以在此处使用 david walsh 描述的技术：http: //davidwalsh.name/detect-scrollbar-width

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

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

于 2012-05-21T21:46:33.080 回答