how to get innerWidth of an element in jquery WITHOUT scrollbar

问题

Given a div that has a scrollbar in it (e.g. b/c of overflow:auto), how do I get the accurate innerWidth of the element? In my example: http://jsfiddle.net/forgetcolor/2J7NJ/ width and innerWidth report the same width. The number I want should be less than 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());

Update:

I need this to work when the box2 div contains a large image (thus, takes a second to load). Here's an example, integrating one of the solutions below (Lukx'), that doesn't work: http://jsfiddle.net/forgetcolor/rZSCg/1/. Any ideas how to get it to wait for the image to load before calculating the width?

回答1:

By inserting a new DIV into the #box1-Container, this DIV will obtain the available width - and reading its width returns a value that appears to be correct.

HTML and CSS both remain unchanged

JS Becomes

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

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

I also forked your Fiddle to see what I have done: http://jsfiddle.net/xc9xQ/2/

So to get this value with a function:

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

回答2:

I'm not sure exactly what you're looking for but I believe it is either the scrollWidth or clientWidth of the div with id box1.

Both are JavaScript properties and do not need jQuery to retrieve but can be grabbed in jQuery with the following $('#box1')[0]. All this does is return the first (and if you're using an ID, only) DOM element from the jQuery selector.

If you're looking to find out the width of the content of box1 regardless of the scroll bar you're probably looking to find $('#box1')[0].scrollWidth. If you're looking for the width available and displayed within box1, you're looking for $('#box1')[0].clientWidth.

I forked your fiddle so you can see both in action. http://jsfiddle.net/arosen/xp9hD/

回答3:

You can make another div by copying your original div, then get the width etc. Something like:

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

saveDiv.innerWidth will give you 0

回答4:

If a solution in plain javascript is ok you can use the technique described by david walsh here: http://davidwalsh.name/detect-scrollbar-width

I forked your fiddle and implemented it: http://jsfiddle.net/jnaO/z9btp/

But again, this is not using jQuery, only javascript.

来源：https://stackoverflow.com/questions/10692598/how-to-get-innerwidth-of-an-element-in-jquery-without-scrollbar

标签

jquery

width