Как получить высоту строки пролета?

Question

Есть ли способ получить line-height из span (или другого встроенного элемента) в JavaScript / jQuery?

Мне нужно с точным вычислением line-height в пикселях , а не значения типа 1.2em, normal или эвристики типа fontSize * 1.5.

Что мне нужно сделать, это растянуть фон span, чтобы заполнить всю высоту строки.Я подумал, что мог бы добавить отступы, чтобы растянуть промежуток, но для этого мне нужен точный line-height.Если кто-то может предложить другой подход, это также будет полезно.

Answer 1

$("span").css( "line-height");

Извлекает вычисленное значение px в виде строки «16px», например. Он использует IE currentStyle или стандарт getComputedStyle под крышками. Что удивительно, так как когда он работает как сеттер, он делает elem.style.something = value, что совершенно другое.

Answer 2

Простой способ сделать это:

var style = window.getComputedStyle(element);
var lineHeight = style.getPropertyValue('line-height');

Получит вычисленное значение высоты строки без использования jQuery и будет работать во всех браузерах начиная с IE9 и далее.

Answer 3

Если ваш дизайн это позволяет, вы можете применить inline-block к элементам, на которые вы нацеливаетесь, а затем использовать outerHeight ...

var inlineHeight = $('.inline-height').css("display", "inline-block").outerHeight(); 
//console.log('Inline Height:' + inlineHeight);

Answer 4

при условии, что диапазон содержится в div.

вы можете установить div в положение: относительный

и интервал в виде блока, который принимает высоту 100%.

Таким образом вы будете растягивать интервал по своему желанию.

Пример здесь (примечание: чтобы увидеть эффект, измените цвет фона диапазона на прозрачный. Вы должны увидеть красный div.)