lineHeightが未定義のテキストエリアからlineHeightを取得するサンプル

１行あたりの高さを表すのがlineHeightプロパティですが「<textarea></textarea>」のようにlineHeightが定義されていないエレメントだと「lh = elem.lineHeight」のようにしても変数に入るのは長さ0のカラ文字列です。offsetWidthのような感じのプロパティはlineHeightにはありません。

それでもlineHeightが必要な場合があるので、取得するためのサンプルを作成しました。



起動画面



「for in」ボタンを押すとテキストエリアのプロパティ名とその値が表示されます。



テキストエリア内でonkeyupイベントを発生させるとタイトル部分にlineHeightの値が表示されます。



以下ソース


テキストエリアのvalueに改行を追加する前後のscrollHeightを取得して、その差をlineHeightの値として返しています。

既存のテキストエリアに対してvalueの変更を加えるとカーソルが移動してしまうので、クローンを作成しています。

クローンのvalueプロパティを一旦、長さ0のカラ文字列にしているのは、そうしないとscrollHeightの値がおかしなことになる場合があるからです。最終的に返すlineHeightの値が大きくなったり、マイナスの値になったりします。値の狂い方の規則性もよく分からなかったので何が原因なのかもよく分かりません。確かめたい人は「v=c.value=''」の部分を削除して、テキストエリアでエンターキーを押しまくると私が見た不可思議な現象を再現できると思います。