JQuery width() не возвращает правильное значение в div с сгенерированным контентом

В приведенном ниже коде предупреждение не возвращает фактический размер #main, он всегда возвращает значение #main css width с% drop. Так что в этом случае я получаю 95 в оповещении. Если я предупреждаю parent(). Width(), я получаю 100.

Данные, возвращаемые из вызова .get(), представляют собой ul, иногда более широкие, чем #main, а иногда и нет. Ширина содержимого, по-видимому, не влияет на то, что возвращает .width().

Итак, мой вопрос: как получить истинную ширину пикселя #main?

CSS

#container {
    width: 100%;
}

#main {
    width: 95%;
    overflow: hidden; 
}

HTML:

<div id="conatiner">
    <div id="main"></div>
</div>

Javascript/JQuery:

$.get('page.php', function(result) {
    $('#main').html(result);
});
alert($('#main').width();

Ответы

Ответ 1

Я столкнулся с этой проблемой при попытке реализовать jquery.autogrow-textarea в текстовых областях, используемых для встроенного редактирования. Текстовые поля содержались в div, которые еще не отображались (css display: none;). При отладке кода javascript .autogrow() я обнаружил, что jQuery .width() возвращал процентное значение с удаленным символом "%" в отличие от рассчитанной ширины в пикселях (например, 100 для 100%, 80 для 80%).

Вот пример jsfiddle, который иллюстрирует этот сценарий: http://jsfiddle.net/leeives/ujE6s/

Чтобы обойти это, я изменил свой код на .autogrow(), как только отобразилось текстовое поле. При этом звонки в .width() были точными.

Я не уверен, что вы работаете со скрытым контентом или нет, но подумал, что я напишу свой ответ, если другие наткнулись на это (как и я) при поиске проблемы с jQuery .width().

Ответ 2

Я столкнулся с этой проблемой. По какой-то причине (окружению) я не смог вытащить правильный .width() из div, у которого было процентное значение для ширины в CSS.

Принятый ответ на этот пост: браузеры webkit получают элемента .sphere() неправильно

где Габи ответила предложением: $(window).load(...) работал отлично.

  $(window).load(function () {
     alert($('#main').width();
  });

Я знаю это старое сообщение, но это может быть полезной информацией для кого-то, если они не попадают в другую почту.

Ответ 3

Это потому, что AJAX является асинхронным. Когда вы запустите alert, запрос не вернется.

Фиксированный код:

$.get('page.php', function(result) {
    $('#main').html(result);
    alert($('#main').width());
});

Ответ 4

Это работает, если вы исправите последнюю строку своего кода:

alert($('#main').width());

Вот скрипка

http://jsfiddle.net/UMAbx/

Кроме того, div id=container был неправильно указан в HTML. Исправлено в скрипке.

Ответ 5

Я не могу воспроизвести это поведение. Возможно, кто-то перепробовал jQuery.fn.width() с реализацией, которая возвращает значение в процентах? Я бы отлаживал Firebug или подобное и проверял эту функцию.

Ответ 6

jQuery ширина() возвращает ширину элемента без его границы и отступов.

CSS width с другой стороны может включать в себя границу и дополнение (это зависит от поведения модели окна браузера /css по умолчанию).
Если вам нужна полная ширина элемента, вы должны использовать jQuery outerWidth().

$.get('page.php', function(result) {
    $('#main').html(result);
    alert($('#main').outerWidth();
});