Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как узнать текущую высоту (ширину) DIVa?

Автор: Riccon 15.3.2005, 14:11

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

Можно ли узнать высоту дива еще как-то, кроме как, при использовании clientHeight?
И где можно про этот clientHeight почитать. Я не нашол smile

Ведёт он себя как-то странно:

Если я назначаю стилю высоту, полученную посредством clientHeight, то логично предположить, что оба значения будут одинаковыми. Так и есть. Но, если в стилях Div'a, есть бордюр, то разница в выстое, между obj.style.height и obj.clientHeight, будет в 2 пикселя(2 бордюра по одному пикселю) в пользу obj.style.height.

Код


    obj.style.height = obj.clientHeight;
    alert(obj.style.height+" = "+(obj.clientHeight));

Почему это? smile

Автор: Aliance 15.3.2005, 16:31

Код


function calс () {
 var elem = document.getElementById("qwer");
 var w = elem.offsetHeight;
 var h = elem.offsetWidth;
 alert(w+" * "+h);
}

Код


<body onload="calc();">

<div id="qwer">gvkljgfdb jgsofdgvkopvo;dh,jcjh;ohck;ohk</div>

Автор: Riccon 15.3.2005, 16:59

О. спасибо! smile

А всё таки, что это за clientHeight?

Автор: Aliance 15.3.2005, 17:16

MSDN

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/office97/html/output/F1/D6/S5B3A9.asp
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/clientheight.asp
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/clientwidth.asp

Автор: Sardar 16.3.2005, 02:03

Да, бордеры отрисовываются "наружу" от контейнера. Также полезно знать про scroll(Width|Height) которые дают абсолютные размеры содержимого, что необходимо при скролинге:

Код

<div id="test1" style="position: relative; overflow: hidden; width:50px; height: 40px;">
  <div id="test2">десь какой то большой контент</div>
</div>

Пример выше по разному работает в Мозилле и ИЕ. offset(Width|Height) для test1 даст его актуальные размеры на странице, а scroll(Width|Height) размеры содержимого. Теперь посмотрим на test2, offset(Width|Height) дают в ИЕ размеры содержимого слоя, а в мозилле размеры видимого пространства предка! То же самое и для scroll(Width|Height). Поэтому размер test2 можно узнать только опросив scroll(Width|Height) его предка. На мой взгляд это не логично smile

Автор: NAV 31.3.2005, 11:41

Ходи по оффсетам родителей. Надежный способ. Я, к примеру, его использовал, чтобы при ресайзе окна всплывающая DIV-менюшка "бегала" за своей первоначальной точкой базирования smile

Код


function DL_GetElementLeft(eElement) {
    var nLeftPos = eElement.offsetLeft;          // initialize var to store calculations
    var eParElement = eElement.offsetParent;     // identify first offset parent element  
    while (eParElement != null) {                                            // move up through element hierarchy
        nLeftPos += eParElement.offsetLeft;      // appending left offset of each parent
        eParElement = eParElement.offsetParent;  // until no more offset parents exist
    }
    return nLeftPos;                             // return the number calculated
}

function DL_GetElementTop(eElement) {
    var nTopPos = eElement.offsetTop;            // initialize var to store calculations
    var eParElement = eElement.offsetParent;     // identify first offset parent element  
    while (eParElement != null) {                                            // move up through element hierarchy
        nTopPos += eParElement.offsetTop;        // appending top offset of each parent
        eParElement = eParElement.offsetParent;  // until no more offset parents exist
    }
    return nTopPos;                              // return the number calculated
}

P.S. Кстати, для вычислений высот и т.п. можно использовать специальные элементы-"измерители" smile

К примеру, под DIV-ом разместил какой-то dummy с заданным ID, вычислил для него смещение и уже можешь найти высоту DIV