JavaScript: найдите DIV line-height, а не свойство CSS, но фактическую высоту строки

Скажем, у меня есть DIV: <div></div>, и я хочу узнать с JS, какова его высота линии. Я знаю, что можно проверить атрибут style style.lineHeight, но я хочу проверить высоту строки фактический, без нее, в зависимости от наличия правила CSS.

Предполагая, что семейство шрифтов и размер шрифта одинаковы, оба должны выводить одну и ту же высоту строки:

<div>One line of text</div>
<div>Two <br /> Lines of text</div>

Как я могу получить высоту строки элемента с JavaScript?

Ответы

Ответ 1

Ответ на самом деле используется .clientHeight. Как сказала Габи, это не очень надежный/заслуживающий доверия. Однако, это так! Здесь:

function getLineHeight(element){
   var temp = document.createElement(element.nodeName);
   temp.setAttribute("style","margin:0px;padding:0px;font-family:"+element.style.fontFamily+";font-size:"+element.style.fontSize);
   temp.innerHTML = "test";
   temp = element.parentNode.appendChild(temp);
   var ret = temp.clientHeight;
   temp.parentNode.removeChild(temp);
   return ret;
}

"Клонировать" свойства вашего элемента в новый, получить новый clientHeight, удалить временный элемент и вернуть его высоту;

Ответ 2

Объяснено на quirksmode: http://www.quirksmode.org/dom/getstyles.html

example: http://www.jsfiddle.net/gaby/UXNs2/

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

и используйте его как

getStyle('test', 'line-height' )

Ответ 3

Это решение работает для меня. Он использует значение свойства line-height, если он был установлен явно, или, когда значение не было установлено, оно вычисляет значение, определяя разницу в высоте объекта, когда его содержимое дополняется одной строкой.

function calculateLineHeight (element) {

  var lineHeight = parseInt(getStyle(element, 'line-height'), 10);
  var clone;
  var singleLineHeight;
  var doubleLineHeight;

  if (isNaN(lineHeight)) {
    clone = element.cloneNode();
    clone.innerHTML = '<br>';
    element.appendChild(clone);
    singleLineHeight = clone.offsetHeight;
    clone.innerHTML = '<br><br>';
    doubleLineHeight = clone.offsetHeight;
    element.removeChild(clone);
    lineHeight = doubleLineHeight - singleLineHeight;
  }

  return lineHeight;
}