Вопрос по jquery – Как получить innerWidth элемента в JQuery БЕЗ полосы прокрутки

7

Учитывая div, в котором есть полоса прокрутки (например, b / c overflow: 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());​

Обновить:

Мне нужно, чтобы это работало, когда div box2 содержит большое изображение (таким образом, для загрузки требуется секунда). Вот пример, объединяющий одно из приведенных ниже решений (Lukx '), которое не работает:http://jsfiddle.net/forgetcolor/rZSCg/1/, Любые идеи, как заставить его ждать загрузки изображения, прежде чем рассчитывать ширину?

innerWidth не имеет ничего общего с полосами прокрутки. А поскольку размер (и видимость) полосы прокрутки будет различаться в зависимости от того, какой браузер и операционная система используются, вы будете каждый раз получать разные ответы. Вероятно, вам следует поискать альтернативные решения для вашей реальной проблемы. Blazemonger
Смотрите также : Stackoverflow.com / д / 8339377/1136253 HQtunes.com

Ваш Ответ

4   ответа
16

#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
Хотя я бы сделал ставку против этого, это даже работает в IE7; -) Lukx
works, если div не содержит большого изображения (возможно из-за времени загрузки). Любая идея, как заставить это работать b / c времени загрузки? IOW, как заставить его ждать загрузки? раздвоенный пример: Jsfiddle.net / forgetcolor / rZSCg / 1 mix
11

scrollWidth илиclientWidth div с идентификатором box1.

Both являются свойствами JavaScript и не нуждаются в jQuery для извлечения, но могут быть получены в jQuery с помощью следующего$('#box1')[0]. Все, что это делает, это возвращает первый (и если вы используете только идентификатор) элемент DOM из селектора jQuery.

Если вы хотите узнать ширину содержимого box1 независимо от полосы прокрутки, которую вы, вероятно, хотите найти$('#box1')[0].scrollWidth. Если вы ищете ширину доступной и отображается box1, ты ищешь$('#box1')[0].clientWidth.

Я раздвоил твою скрипку, чтобы ты мог видеть оба в действии.http: //jsfiddle.net/arosen/xp9hD

clientWidth не требует дополнительной разметки html, работает в IE 8, поэтому, на мой взгляд, это лучше, чем принятый ответ. +1 от меня Adam Moszczyński
Нет необходимости обращаться к точному элементу. Просто прочитайте свойство, используя JQuery: $ ('# box1'). Prop ('clientWidth') Alexandr
1

скопировав свой оригинальный div, затем получить ширину и т. Д. Что-то вроде:

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

saveDiv.innerWidth даст вам 0

0

вы можете использовать технику, описанную Дэвидом Уолшем:http: //davidwalsh.name/detect-scrollbar-widt

Я раздвоил твою скрипку и реализовал ее:http: //jsfiddle.net/jnaO/z9btp

Но опять же, это не использует jQuery, только javascript.

интересный подход. в моем случае я не могу рассчитывать на то, что полоса прокрутки всегда находится в div, поэтому нужно получить динамическое значение ее текущего состояния. но, возможно, я мог бы обнаружить его присутствие и использовать эту идею. mix
Вы можете свернуть измерение в операторе if, который вычисляет ширину полосы прокрутки только в том случае, если внутреннее поле больше внешнего, я обновил скрипку (тот же адрес). jnaO

Похожие вопросы