jQuery: height () / width () и “display: none”

Я всегда думал о элементах, которые display:none стиль CSS не возвращал 0 для height() и width() .

Но в этом примере:

HTML

 
a

CSS

 alert($("#target").height()); 

они не делают: http://jsfiddle.net/Gts6A/2/

Как так? Я видел, что в прошлом я возвращался много раз.

Если элемент имеет offsetWidth 0 (jQuery рассматривает этот «скрытый»), здесь проверяется , а затем пытается выяснить, какой должна быть высота. Он устанавливает следующие свойства элемента через jQuery.swap() на время проверки:

  • position: "absolute"
  • visibility: "hidden"
  • display: "block"

Затем он получает высоту, используя getWidthOrHeight(...) который добавляет границу / дополнение при необходимости через augmentWidthOrHeight(...) зависимости от модели windows и возвращает все вышеперечисленные свойства к их прежним значениям.

Таким образом, в основном он принимает элемент, показывая его из streamа документа, получая высоту, а затем скрывая ее снова, все до обновления streamа пользовательского интерфейса, чтобы вы никогда не видели, чтобы это произошло. Это делает так, что .height() / .width() работает даже на элементах, которые в настоящее время скрыты, пока их родители видны … поэтому вы можете запускать .height() / .width() , не выполняя show / hide трюк, который он выполняет в вашем коде, обрабатывается внутри .height() и .width() .

РЕДАКТИРОВАТЬ

Это, по-видимому, было исправлено с jQuery 1.4.4

Пример: http://jsfiddle.net/GALc7/1/


Я считаю, что это справедливо только для элементов, родительский элемент которых «display: none»

См. Эту статью по этому вопросу http://dev.jquery.com/ticket/125

Также см. Этот пример (сохранить как файл .html) или посмотреть ( http://jsfiddle.net/GALc7/ )

    Example        
  • JQuery CSS и JS для ограниченных элементов
  • Включение более чем одной версии jQuery
  • jQuery, если div содержит этот текст, замените ту часть текста
  • jQuery: обнаружение нажатой кнопки мыши во время события mousemove
  • поиск jQuery и контекст
  • Два запроса $ .post один за другим. Второй запрос $ .post не выполняется.
  • Обработка ошибок jQuery Ajax, отображение пользовательских сообщений об исключениях
  • Обрезка IE8 и JQuery ()
  • Связывание значения столбца в jqGrid с новой страницей с помощью GET
  • Используйте базовую аутентификацию с помощью jQuery и Ajax
  • jQuery scrollRight?
  • Interesting Posts

    Как создать пользовательский хром в wpf?

    Хосты файлы и разблокированные субдомены

    Угловые интерфейсы UI-Router

    Как разрешить ошибку «Ресурс не найден, который соответствует указанному имени» при добавлении библиотеки v7 AppCompat в Eclipse?

    Инъекционная инъекция с Джерси 2.0

    Chkdsk / r для моего pendrive – Недостаточно места на диске для восстановления потерянных данных после согласия на восстановление потерянных цепочек

    Seagate 1 TB Внешний диск, зашифрованный с помощью Bitlocker по ошибке

    Объединение соединений node.js + mysql

    Неконтролируемый анализ настроений

    Как перевести между часовыми поясами Windows и IANA?

    Есть ли веская причина для обеспечения максимальной ширины 80 символов в файле кода, в этот день и в возрасте?

    Как создать простой прокси-сервер в C #?

    Каковы плюсы и минусы выполнения вычислений в sql в вашем приложении

    Почему медленное поглощение WADL?

    Как работать с часовыми поясами в ASP.NET?

    Давайте будем гением компьютера.