Почему jquery возвращает 0 для offsetHeight, когда firebug говорит, что это 34? - PullRequest
Новая
       32

Почему jquery возвращает 0 для offsetHeight, когда firebug говорит, что это 34?

7 голосов
/ 12 марта 2009

Итак, у меня есть div, содержимое которого генерируется во время выполнения, изначально оно не имеет высоты, связанной с ним. Когда он сгенерирован в соответствии с firebug и из того, что я могу предупредить с помощью js, div все еще имеет высоту 0. Однако, глядя на свойства только для чтения с помощью firebug, я вижу, что он имеет высоту смещения 34. Именно это значение Я нуждаюсь. Надеюсь, это очевидно, но если это не так, это число является переменным, оно не всегда 38.

Итак, я подумал, что смогу получить это, используя jquery ... 

$("#parentDiv").attr('offsetHeight');

или это с прямыми JS ... 

document.getElementById("parentDiv").offsetHeight;

Но все, что возвращается, это 0. Имеет ли это какое-либо отношение к тому факту, что высота смещения в этом случае является свойством только для чтения? Как я могу получить эту высоту? Я имею в виду, что firebug как-то это выясняет, так что, похоже, я должен быть в состоянии.

Edit: Вот пример того, как выглядит div прямо сейчас ... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">

<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"><BODY><FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"><DIV id="container">

<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
    <DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
    </DIV>
    <DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
        <DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
            <IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" /> 
        </DIV>
        <DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
            <IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" />
            <IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" />
        </DIV>
    </DIV>
</DIV>

</DIV></FORM></BODY></HTML>

Этот код генерируется элементом управления в отдельной библиотеке. Вот собственно код, создающий его на моей странице .aspx. 

<blah:blahControl ID="control" runat="server" />

Хорошо, это немного отредактировано, но это намного больше HTML, чем я имел раньше. Div, на который я ссылался как «parentDiv», до этого назывался «ctl00_BodyContentPlaceHolder_UserControl». Этот код включает рассматриваемый div, его родного брата, родителя, деда и детей. Это почти прямая копия Firebug.

Обновление: Я должен был упомянуть, что это делается в IE 7. В Firefox он, казалось, хорошо работал один раз, но теперь возвращает 0. Это дает какие-то новые идеи о возможных обходных путях или что-то еще?

... Вы все должны думать, что я чокнутый.

Обновление: Немного стиля ... 

.TransparentBg 
{
    background-color: white;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.Foreground
{
    position: absolute;
    top: 0px;
}

Ответы [ 5 ]

5 голосов
/ 12 марта 2009

Вы уверены, что элемент включен в дерево документа и отображается? (т.е. не «display: none», а «visibility: hidden» в порядке.)

Элемент, который фактически не участвует в процессе рендеринга документа, не имеет размеров и будет иметь offsetWidth / Height = 0.

ETA после добавления примера кода: с вашим точным кодом я получаю offsetHeight на делении '17'. Первое изображение имеет правильный размер, второе не имеет размера.

Это правильно, как показано (*). Любые изображения, которые не загружаются, заменяются их альтернативным текстом в виде встроенного диапазона. Ваше изображение не имеет альтернативного текста, поэтому оно заменяется пустой строкой. Обычно, как встроенный элемент, он не может быть установлен для какого-либо конкретного размера. Исключением является первое изображение, потому что вы дали ему «display: block», что делает его доступным для явного размера, задаваемого width / height.

В режиме «Причуды» у вас могли бы быть маленькие значки «разорванного изображения», размер которых был бы таким же, как и предполагалось. В стандартном режиме этого не происходит, поскольку предполагается, что вы знаете, как правильно использовать альтернативный текст, если используете стандарты.

В любом случае, измерение размеров будет работать нормально, если я заменю URL-адреса "..." реальными рабочими адресами.

(*: хотя на самом деле вы не можете его увидеть из-за довольно странного «скрытого переполнения» в html и комбо «left: 1597px;». Хорошо, если у вас нет монитора действительно шириной !)

4 голосов
/ 12 марта 2009

Вы уверены, что это не Гейзенбаг ? Если вы устанавливаете высоту где-то программно, а затем пытаетесь прочитать ее позже, есть вероятность, что DOM не обновится.

1 голос
/ 12 марта 2009

Попробуйте вызвать функцию смещения, когда все DOM и изображения полностью загружены, используя load () вместо document.ready ().

$ (окно) .load (функция () { // Поместите код для высоты здесь });

1 голос
/ 12 марта 2009

При загрузке этого файла с действующим IMG SRC выдается 3 окна с предупреждением «37». Без действительного IMG SRC выдает «17» на всех трех. Какую версию Jquery вы используете? А какая версия FireFox / IE? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
    <script type="text/javascript" src="jquery.js"></script>
</HEAD>
<BODY>
    <FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post">
        <DIV id="container">
            <DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
                <DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
                </DIV>
                <DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
                    <DIV id="ctl00_BodyContentPlaceHolder_Navigation1" title="Click to pan the map." style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
                        <IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" /> 
                    </DIV>
                    <DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
                        <IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
                        <IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
                    </DIV>
                </DIV>
            </DIV>
            <script type="text/javascript">
                $(window).load(function () {
                alert($("#ctl00_BodyContentPlaceHolder_UserControl").attr('offsetHeight'));
                alert(document.getElementById("ctl00_BodyContentPlaceHolder_UserControl").offsetHeight);
                alert($("#ctl00_BodyContentPlaceHolder_UserControl").height());
                });
            </script>
        </DIV>
    </FORM>
</BODY>

0 голосов
/ 18 декабря 2013

Я только что обнаружил проблему, когда получал offsetHeight элемента, когда документ был готов, но он был в контейнере, который был скрыт .

Это привело к значению offsetHeight, равному 0, но firebug сказал, что имеет высоту 32.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...