Как определить "высоту линии" с помощью Javascript (jQuery)?

Ответ 1

$('selector').css('line-height');

Ответ 2

Вы не можете быть уверены, чтобы получить расчетную высоту линии в пиксельном кросс-браузере. Иногда значение "normal" или "inherit", которое вычисляется в Firefox, но не в IE, например. Одним из способов решения этой проблемы (в зависимости от вашего варианта использования) является получение рассчитанного размера шрифта (который вы можете видеть) и умножить его на 1,5, что справедливо стандарт:

var fontSize = $(el).css('font-size');
var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);

Да, это немного грубо, но это будет отлично работать для вещей, например, для определения правильной высоты элемента на основе некоторого количества текстовых строк. Имейте в виду, что вы можете/должны заменить 1.5 любым стандартным соотношением длины и размера шрифта, которое вы, возможно, уже используете на своем сайте. Если вы этого не знаете, вы можете узнать, проверив любой экземпляр в firebug и посмотрев на вычисленный размер шрифта a) и b) высоту строки. Затем замените 1.5 на b/a.:-)

Надеюсь, что это будет полезно!

Ответ 3

$('selector').css('line-height');

Если это возвращает число с px, вы можете использовать его. Если он возвращает% или число без единиц, вы можете умножить его на размер шрифта и использовать его. Если он вернется нормальный, мне удалось это сделать:

var height = $element.height();
var font_size = parseInt($element.css('font-size'));
var num = Math.floor(height / font_size);
for(; height % (height / num) != 0; --num)
    ;
return height / num;

Это работает только с "нормальным", потому что вы можете предположить, что высота линии всегда будет больше размера шрифта.

Он основан на идее height % line_height == 0.
Технически num == height / line_height, что делает его непознаваемым. К счастью, слово height / font_size является хорошим эвристическим, потому что оно и height / line_height обычно одно и то же или близко, и если вы выключены, вы всегда перевыполнены - опять же, потому что "нормальный" гарантирует высоту линии больше, чем размер шрифта - поэтому вы можете протестировать и попробовать еще раз.

Ответ 4

$('selector').css('line-height');

Возвращает высоту строки как десятичное значение в пикселях, с единицей, например. "22.5px"

Следует проявлять осторожность при использовании этого решения, поскольку разные браузеры сообщают о разных результатах. Я обнаружил, что вы не можете использовать безразмерные меры с высотой строки (например, 2.2) в своем CSS, поскольку IE6 сообщит о некорректном результате (например, вместо 2px вместо 36px). Поэтому я рекомендую использовать эталонную высоту на уровне единицы.

Ответ 5

Получить и сохранить текст, временно установить текст в одну строку значения (например, "x" или "& nbsp" ), получить и сохранить .hight(или .inner или .outer, что вам нужно), заменить текст с сохраненным значением. Покажите, если необходимо (например, элемент скрыт), а затем при необходимости снова скройте.

Этот (.hight) даст вам общую высоту строки (размер шрифта плюс выравнивание линии) в цифре (например, 15 для размера шрифта 12 и высоты строки 1,25).

Используйте скрытый div, чтобы сделать все это при необходимости, показать, получить высоту, скрыть.

Это предупреждение отображает числовое значение 15, все браузеры:

<div id="TestDiv">
    Any text you want.
</div>

    jQuery(document).ready(function()
{
    var TestText = $("#TestDiv").text();
    var TestDivLineHeight = $("#TestDiv")
        .css("font-size", "12px").css("line-height", "1.25").text("x").height();
    alert(TestDivLineHeight);
    $("#TestDiv").text(TestText);
});