Подтвердить что ты не робот

Как получить переполненную ширину элемента на веб-странице

У меня есть два divs, например:

<div id="parent" style="width:100px:overflow:hidden;">
    <div id="child"> 
      tooooooooooooooooooooo much content to fit in parent
    </div>
</div>

Я динамически обновляю содержимое дочернего элемента и прокручиваю его с помощью jQuery. Я хотел бы узнать, насколько широким является ребенок, поэтому я знаю, когда прекратить прокрутку. Проблема в том, что фактическая ширина дочернего элемента после присутствия переполненного содержимого шире, чем даже экран (кажется, около 2500 пикселей с текущим тестовым контентом). Граница элемента, если его набор не распространяется на фактическую ширину содержимого, текст переполняется за пределы видимой границы.

Используя jQuerys $('#child').width, свойства clientWidth, scrollWidth (thanks bobince) и offsetWidth все имеют максимальный размер при 1024px (это ширина моего монитора). Кто-нибудь знает какой-либо способ узнать, насколько широкий контент элементов включает переполнение? Если это помогает, приложение, которое я создаю, будет запущено в среде типа киоска, поэтому решение только для Firefox (даже для ночной версии) прекрасно.

Обновление: scrollWidth на родительских работает, я должен был бы прочитать более внимательно, спасибо вам снова bobince.

4b9b3361

Ответ 1

document.getElementById('parent').scrollWidth

scrollWidth - это расширение IE, которое исторически было менее хорошо поддерживается, чем offsetWidth. Однако в наши дни это все современные браузеры для настольных компьютеров.

Ответ 2

Используя JQuery, вы можете сделать:

$('#parent')[0].scrollWidth