Get line-height of p tag

Question

I want to figure out the line-height of a <p> tag within a div.

var myp = document.getElementById('myp');
var heightLabel = document.getElementById('heightLabel');
heightLabel.innerHTML = myp.style.lineHeight + " is the height.";

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

However, as seen in the code above, if the line-height of the p tag is not explicitly assigned then using .style.lineHeight returns an empty string.

Is there any way to get the height of a line in a <p> tag if it hasn't been assigned? I'd like to get it in px at the end.

You need the computed style not the style property – Musa Jul 07 '17 at 19:00 — Musa, Jul 07 '17 at 19:00

loelsonk · Accepted Answer · 2017-07-07T21:39:38.250

5

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):

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

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

edited Jul 07 '17 at 21:39

answered Jul 07 '17 at 19:29

loelsonk

3,570
2
16
23

1

Is there any way to translate `normal` to numeric units? – MarksCode Jul 07 '17 at 20:12
@MarksCode I've updated my answer, see my comments. I explained how to get only "20" from "20px" string and cast it to typeof number. If it helped you let me know, don't forget to accept my answer. – loelsonk Jul 07 '17 at 20:52
Getting an error when running snippet: `Uncaught TypeError: Cannot read property '0' of nul` – MarksCode Jul 07 '17 at 21:00
@MarksCode at what line? `mypStyle.getPropertyValue('line-height').match(/\d+/)[0]`? What is output for `mypStyle.getPropertyValue('line-height')`? – loelsonk Jul 07 '17 at 21:08
@MarksCode Ok, one more edit. Instead of matching digits we use `parseFloat()`, if you are sure your value will be always intenger use `parseInt()` instead. See updated answer. – loelsonk Jul 07 '17 at 21:16
getting `NaN number` – MarksCode Jul 07 '17 at 21:23
For what value? – loelsonk Jul 07 '17 at 21:24
Ok, I see the error, let me fix it. Firefox correctly shows the number, but chrome does not. – loelsonk Jul 07 '17 at 21:25
Once again I've updated my answer. Line-height is different for all browsers, thats my we have to use small trick. It's a solution from another question. Chrome output is `18` but ff is `20`. – loelsonk Jul 07 '17 at 21:41

Get line-height of p tag

1 Answers1

Linked

Related