JavaScript: Find Div'S Line-Height, Not CSS Property But Actual Line-Height

JavaScript: Find DIV's line-height, not CSS property but actual line-height

The answer is actually using .clientHeight. As Gaby said, this is not really reliable/trustworthy. However, it is! Here:

function getLineHeight(el) {
    var temp = document.createElement(el.nodeName), ret;
    temp.setAttribute("style", "margin:0; padding:0; "
        + "font-family:" + (el.style.fontFamily || "inherit") + "; "
        + "font-size:" + (el.style.fontSize || "inherit"));
    temp.innerHTML = "A";

    el.parentNode.appendChild(temp);
    ret = temp.clientHeight;
    temp.parentNode.removeChild(temp);

    return ret;
}

"Clone" the properties of your element into a new one, get the new's clientHeight, delete the temporary element, and return it's height;

Get line-height of p tag

Instead of .style property, you need to getComputedStyle() of your p element

var elementStyle = window.getComputedStyle(*DOM element*);

After that you can simply use elementStyle.getPropertyValue(*style-property*) prop.

Btw. you can check computed style under your console (firefox screenshot):

Sample Image

See working example:

var myp = document.getElementById('myp');var heightLabel = document.getElementById('heightLabel');var mypStyle = window.getComputedStyle(myp);heightLabel.innerHTML = mypStyle.getPropertyValue('line-height') + " is the line height.";
// console.log(mypStyle.getPropertyValue('line-height')); // output 20px // console.log(typeof mypStyle.getPropertyValue('line-height')); // string
// Using parseFloat we convert string into value// Examples: // parseFloat('20px') // 20, typeof number// parseFloat('22.5rem') // 22.5 typeof number// If you are sure, your string will always contain intenger value use parseInt() instead// DOES not work cross-browser// Chrome return line-height normal, firefox '20px'// var getNumberValue = parseFloat(mypStyle.getPropertyValue('line-height')); // 20, typeof string
console.log(getLineHeight(myp));

// https://stackoverflow.com/questions/4392868/javascript-find-divs-line-height-not-css-property-but-actual-line-height?noredirect=1&lq=1function 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;}

<div>       <p id=myp>People assume I'm a boiler ready to explode, <br>but I actually have very low blood pressure, <br>which is shocking to people.</p>    </div>        <h3 id="heightLabel"></h3>

line-height are not the same between divs when copied with javaScript

Let's do some math:

You set on .ta-source font-size on 1.4rem, considering that the root element has font-size to 16px, the font-size of 1.4rem will correspond to 22.4px;

on .ta-source you also set line-height:1.42857,when line-height is defined as a unit-less number, the rule is the number will be multiplied with the current font size to set the line height; the current font-size is 22.4px, so it's equivalent to 31,999968px.

Now, when you get

var lh = window.getComputedStyle(document.querySelector(".ta-source")).lineHeight
var fs = window.getComputedStyle(document.querySelector(".ta-source")).fontSize

you receive two rounded numbers in px: you don't receive for lh nor 1,42857 neither 31,999968px, but 32px and for fs you don't get the measure in rem but in px, 22.4px. These measures are applied to ta-target, and I would even say correctly.

The differences, indeed, are on ta-source and in the way the line-height of 1.42857 equivalent to 31,999968px is rendered: some browsers rounds up, others down. Chrome rounds it down, Firefox rounds it up; Chrome rounds it to 31px, FIrefox to 32px (try to set in Chrome line-height on .ta-source to 32px, everything will align!).

So, the problem lies is the subpixel rendering problems. You will find tons of articles on google.

Issue with inconsistency of line-height and font-size

You can just add: line-height: 1; in the css as such property doesn't need a unit.

Jquery .css line-height not working

Try this

jQuery.each(jQuery('[id^=drop_]'), function(index, value) {  alert(jQuery(this).css("line-height"));  jQuery(this).css("line-height", "35px");  alert(jQuery(this).css("line-height"));});

p { line-hieght: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="drop_first">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p id="drop_second">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p id="drop_third">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p id="drop_fourth">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p id="drop_fifth">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

Why a nested span inside a div does not follow line-height rule for that div?

<span> is, by default, an inline element.

If you expect it to behave like an inline block element, you have to give it a display value of inline-block and it will have a height of exactly 88px:

div > span {   display: inline-block;   background-color: rgba(255,0,0,.1);}

<div style="font-size:88px;line-height:88px;">      I need <span style="font-size:88px;line-height:88px;">videos</span></div>

How to get the size of a row in a text with Jquery without .css('lineHeight'); and .css(font-size);?

If you actually want to return the line height use this...

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;
}

Then use it like...

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

From here... JavaScript: Find DIV's line-height, not CSS property but actual line-height

JavaScript: Find Div'S Line-Height, Not CSS Property But Actual Line-Height