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

by

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;

More Related Contents:

  1. Fade animation while scrolling
  2. Get the longest text in HTML document using Jquery or javascript
  3. How do you read CSS rule values with JavaScript?
  4. jQuery SVG, why can’t I addClass?
  5. Setting background-image using jQuery CSS property
  6. Using Javascript in CSS
  7. How to get the background color code of an element in hex?
  8. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  9. jQuery: Get selected element tag name
  10. width/height after transform
  11. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  12. Can I apply CSS to the elements within an iframe?
  13. Save a pre element as PDF with CSS
  14. Get CSS path from Dom element
  15. jQuery event that triggers after CSS is loaded?
  16. Div Z-Index issue with Flash movie
  17. Center flex item in container, when surrounded by other flex items
  18. Change the style of :before and :after pseudo-elements? [duplicate]
  19. How to use Javascript to check and load CSS if not loaded?
  20. Remove scrollbar but not scrolling functionality [duplicate]
  21. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  22. fade effect using javascript no jquery?
  23. Wrapping lists into columns
  24. How to optimize website for touch devices
  25. HTML5 input required, scroll to input with fixed navbar on submit
  26. Polymer share styles across elements
  27. How do I put a clear button inside my HTML text input box like the iPhone does?
  28. Possible to reverse a css animation on class removal?
  29. Performance impact of using css / javascript source-maps in production?
  30. Getting a sticky header to “push up”, like in Instagram’s iPhone app using CSS and jQuery

Leave a Comment