DOM 要素内の行数をカウントするにはどうすればよいですか?

DOM 要素内の行数をカウントする

DOM 要素内のテキストの行数を決定することは可能ですが、いくつかの考慮が必要です。

DOM の自動改行

テキスト内の自動改行は、DOM 自体では直接表現されません。 DOM には生のテキスト コンテンツのみが含まれます。

要素の高さに基づく行数のカウント

ただし、要素の高さがそのコンテンツに依存する場合は、その数を推定できます。高さをフォントの行の高さで割って、行数を調整します。

<code class="js">var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = document.getElementById('content').style.lineHeight;
var lines = divHeight / lineHeight;</code>

間隔とパディングの調整

パディングと行間は影響を与える可能性があることに注意してください。この計算の精度。

例

次のコードは、行の高さを設定して div 要素の行数をカウントする方法を示しています。

<code class="html"><div id="content" style="width: 80px; line-height: 20px">
  hello how are you? hello how are you? hello how are you? hello how are you?
</div></code>

<code class="js">function countLines() {
  var el = document.getElementById('content');
  var divHeight = el.offsetHeight;
  var lineHeight = parseInt(el.style.lineHeight);
  var lines = divHeight / lineHeight;
  alert("Lines: " + lines);
}</code>

このコードは、div 要素の行数を示すアラートを表示します。

以上がDOM 要素内の行数をカウントするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。