それでもlineHeightが必要な場合があるので、取得するためのサンプルを作成しました。
起動画面
「for in」ボタンを押すとテキストエリアのプロパティ名とその値が表示されます。
テキストエリア内でonkeyupイベントを発生させるとタイトル部分にlineHeightの値が表示されます。
以下ソース
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>scrollHeight</title> | |
| <style type="text/css"> | |
| .max{width:100%;height:100%} | |
| .w-max{width:100%} | |
| .nowrap{white-space:nowrap} | |
| .ta-c{text-align:center} | |
| .bc{border-collapse:collapse} | |
| .of-auto{overflow:auto} | |
| .of-hidden{overflow:hidden} | |
| .border1{border:solid 1px #000} | |
| </style> | |
| </head> | |
| <body class=of-hidden> | |
| <table class="max bc"> | |
| <tr height=1><td><button id=btn>for in</button></td></tr> | |
| <tr><td><textarea id=ta class=max wrap=off></textarea></td></tr> | |
| </table> | |
| </body> | |
| <script> | |
| resizeTo(300,300) | |
| getLineHeight=function(ta){ | |
| var c=document.body.insertBefore(ta.cloneNode(true)), h='scrollHeight', v=c.value='', h0=c[h], v=c.value='\n', h1=c[h] | |
| return c.removeNode(true), h1-h0 | |
| } | |
| ta.onkeyup=function(){ document.title = getLineHeight(this) } | |
| btn.onclick=function(){ | |
| var a=[], n | |
| for(n in ta){a.push(n +' = '+ta[n])} | |
| ta.value = a.sort().join('\n') | |
| } | |
| </script> | |
| </html> |
テキストエリアのvalueに改行を追加する前後のscrollHeightを取得して、その差をlineHeightの値として返しています。
既存のテキストエリアに対してvalueの変更を加えるとカーソルが移動してしまうので、クローンを作成しています。
クローンのvalueプロパティを一旦、長さ0のカラ文字列にしているのは、そうしないとscrollHeightの値がおかしなことになる場合があるからです。最終的に返すlineHeightの値が大きくなったり、マイナスの値になったりします。値の狂い方の規則性もよく分からなかったので何が原因なのかもよく分かりません。確かめたい人は「v=c.value=''」の部分を削除して、テキストエリアでエンターキーを押しまくると私が見た不可思議な現象を再現できると思います。
0 件のコメント:
コメントを投稿