0

I need to parse many string values (which are probably HTML) to HTML and then, get it own height (as HTML node). I don't want to create real node inside my real HTML, probably there is a way to create fake one and get it height?

Example:

const arrOfHtml = ["<div>Test</div>", "<div><h2>Test2></h2></div><div><p>Im not ok</p></div>"];
arrOfHtml.forEach(el => {
  console.log($(el).height())
})
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
zzzzz
  • 222
  • 2
  • 7
  • 5
    The problem is that the browser doesn't know exactly what the height is until the element is added to the DOM and layout decisions are made. – Pointy Nov 03 '22 at 16:27
  • Any way to fake it? I understand that I can just add and delete it, but performance of my app will be dead. – zzzzz Nov 03 '22 at 16:29
  • 1
    What are you actually trying to do by getting the height like this? – epascarello Nov 03 '22 at 16:33
  • Nope, I don't think you can fake it, the results will likely depend on any CSS that gets applied to any of these elements. – phuzi Nov 03 '22 at 16:34
  • @epascarello, Im trying to set row height of my table component, which will depends on HTML elements inside a row. So for example if HTML element hight will be higher of default row height, I will increase it. – zzzzz Nov 03 '22 at 16:37
  • *I'm trying to set row height of my table component, which will depends on HTML elements inside a row.* (which seems different from the asked question) - consider using css flex: `justify-content: stretch;` or `display:grid`. Not quite the same question, but some examples of justify-content: https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container – freedomn-m Nov 03 '22 at 16:41
  • I will be happy to use it, but, Im using virtual table component of React.js. I need to specify height constantly (height = 32 etc.). – zzzzz Nov 03 '22 at 16:45
  • 1
    "*virtual table component of React.js*" - didn't see that in the question... please provide all relevant details – freedomn-m Nov 03 '22 at 16:53

1 Answers1

1

Pointy makes a great point in their comment.

If you want to get the height of an HTML node, you have to render it. You don't really have a choice, elements have to be added to the DOM. I've found that performance isn't usually an issue unless you have hundreds of elements.

Dr. Vortex
  • 505
  • 1
  • 3
  • 16