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

Получение внутренней высоты элемента

Как вы получаете внутреннюю высоту элемента, без заполнения и границ?

Нет jQuery, только чистый JS и кросс-браузерное решение (включая IE7)

enter image description here

4b9b3361

Ответ 1

var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");

Вышеприведенная версия будет работать в современных браузерах. Пожалуйста, проверьте currentStyle для браузеров IE.

Ответ 2

ИЗМЕНИТЬ из комментариев:

http://jsfiddle.net/hTGCE/1/ (тогда ожидается немного больше кода)

в Интернете вы найдете такие функции:

  function getRectangle(obj) {

          var r = { top: 0, left: 0, width: 0, height: 0 };

          if(!obj)
             return r;

          else if(typeof obj == "string")
             obj = document.getElementById(obj);


          if(typeof obj != "object")
             return r;

          if(typeof obj.offsetTop != "undefined") {

             r.height = parseInt(obj.offsetHeight);
             r.width  = parseInt(obj.offsetWidth);
             r.left = r.top = 0;

             while(obj && obj.tagName != "BODY") {

                r.top  += parseInt(obj.offsetTop);
                r.left += parseInt(obj.offsetLeft);

                obj = obj.offsetParent;
             }
          }
          return r;
       }

если вы хотите вычесть, padding/border-width устанавливается в css файле, а не динамически в атрибуте style:

    var elem = document.getElementById(id);
    var borderWidth = 0;

          try {
             borderWidth = getComputedStyle(elem).getPropertyValue('border-top-width');

             } catch(e) {

             borderWidth = elem.currentStyle.borderWidth;
          } 
    borderWidth = parseInt(borderWidth.replace("px", ""), 10);

и с заполнением то же самое. то вы его вычисляете.

Ответ 3

У меня была та же проблема, и выяснилось, что нет никакого нативного крестообразного решения, но решение легко, хотя

var actual_h = element.offsetHeight;

            if(parseInt(element.style.paddingTop.replace('px','')) > 0){
                actual_h=actual_h -  parseInt(element.style.paddingTop.replace('px',''));

            }
            if(parseInt(element.style.paddingBottom.replace('px','')) > 0){
                actual_h=actual_h -  parseInt(element.style.paddingBottom.replace('px',''));

            }