HTML: one row of <textarea> is of how much height?

Question

I want to know the height of one row of <textarea>. I want to know that because I want to do some calculations.

Do we know it or do we have to do some scripting?

Answer 1

The height of a row is set by line-height.

For example:

<textarea rows="1">hello world</textarea>

If you set the following:

textarea { line-height: 1; font-size: 12px; border: none; margin: 0; padding: 0; }

By inspecting the textarea element you'll find out that it has a height of 12px.

Answer 2

Basically it is the same as whatever the line-height is set to. You can either set it explicitly, or figure out what it is set to, and go from there.

Here is an example

Answer 3

You could also determine the value of line-height (or any style) by using currentStyle or getComputedStyle, as per this answer for getting the line-height of a div:

https://stackoverflow.com/a/4392968/142714

And if you have jQuery you can use .css(), which abstracts the above (there are browser differences to consider).