JavaScript : 要素幅をリアルタイムに取得。getComputedStyle()とwindow.onresize。

相対値ではデバイスによって変わってくるから。

こんにちは、「ふ」です。
HTMLの要素内に表示できる文字数を取得したいと思います。

簡単やんけ。

「そんなの、要素のwidthをfont-sizeで割ればいいのでは？」


と思った方もいらっしゃるでしょう。ところがそれは要素のwidthが、pxなどの絶対値指定である場合に於いてのみ有効です。
以下のコードをご覧ください。

要素幅を相対値で指定しています。

画面幅600pxのデバイスでプレビューしたのが上の画像です。

これを別のデバイス（画面幅850px）で表示させてみましょう。

要素の幅がデバイスの画面幅に合わせて広がってしまいました。font-sizeは初期値（16px）と絶対値指定になっているので、要素内に収まる文字数は増えてしまいます。

要素の幅を相対値で指定することはしばしばだと思うのですが、実際に画面に表示される幅については、デバイスまたはブラウザの 幅に左右されてしまいます。
したがって、「要素内に表示できる文字数」というのは単純に（要素幅）/（フォントサイズ）で決定することはできません。

画面幅によって変わってくるwidthの値を取得する方法はないものか。

window.getComputedStyle()。

window.getComputedStyleを試してみましょう。これは「算出されたあとのスタイルシートを返す」、とても便利なものです。

getComputedStyleの個別のプロパティ（ここではwidth）を呼び出した時、返り値は文字列となります。codeの４行目でその値を直接要素内に表示させるようにしました。

デバイスの画面幅から算出されたwidthが絶対値（px）で表示されました。

ちなみになぜ

とならずに中途半端な値になるかというと、

デフォルトでbodyに8pxのmarginが掛かっているからです。実際には

と算出されます。
扨（さて）、これを画面幅850pxのブラウザでプレビューした場合、

となるはずですがどうでしょうか。

うまくいったみたいですね。

画面幅が変わったことを検知。window.onresize。

実は先ほどのコードは完璧ではありません。ページの初期読み込み時には有効なのですが、ユーザが手動でブラウザの幅を変化させた場合を考慮していなかったのです。

その対処には、window.onresizeというものを使いましょう。画面幅の変化を検知して、処理を実行させるイベントハンドラです。

まづは先ほどのコードを関数定義化しておきます。

ブラウザの初期読み込み時とブラウザの幅が変化した時にこのrealtime( )を実行させたい。
少し乱暴ですが同じscript内に記述しましょう。

コードを実行して、手動で画面幅を変化させてみます。

おおお、画面幅を変化させるとwidth値がリアルタイムに表示されるようになりました！

ブラウザ君、忙しくさせてすいません。

window.onresize、画面幅の変化に伴ってリアルタイムなアクションを起こしてくれるので面白いですね。あまり複雑な処理を書くと負荷がかかり過ぎそうです。ブラウザ君、ごめんね。

そしてgetComputedStyleメソッド。使いどころによってはとても便利なものとなりそうです。ではまた。

JavaScript/CSS: 文字数オーバーしたときに「…」で表示する。