JQuery: height()/width() и "display: none"

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

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

HTML

<div id="target" style="display:none;">
a
</div>

CSS

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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

ИЗМЕНИТЬ

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

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

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

См. статью по теме http://dev.jquery.com/ticket/125

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            alert($("#target").height());
        });
    </script>
</head>

<body>
    <div id="parent" style="display:none;">
        <div id="target" style="height:100px;display:block;">
            a
        </div>
    </div>
</body>
</html>