DOM 要素内のテキスト行を効率的にカウントするにはどうすればよいですか?-jsチュートリアル-php.cn

DOM 要素内のテキスト行を効率的にカウントするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-02 20:02:30

オリジナル

825 人が閲覧しました

How to Efficiently Count Text Lines within a DOM Element?

DOM 要素内のテキスト行数のカウント

指定された div 要素内の行数は、さまざまな方法で決定できます。次の内容を持つ特定の div について考えてみましょう:

<div id="content">hello how are you?</div>

ログイン後にコピー

この div 内の行数は、div の幅、フォントサイズ、行の高さなどのさまざまな要因に基づいて変動する可能性があります。これらの行を正確にカウントするには、次の手法を使用できます。

Div の高さと行の高さを使用する

div の高さがその内容によって直接影響を受ける場合、次のことができます。次の式を使用して行数を計算します:

Number of Lines = Div Height / Line Height

ログイン後にコピー

div の高さを取得するには、次を使用します。

var divHeight = document.getElementById('content').offsetHeight;

ログイン後にコピー

行の高さを取得するには、次を使用します:

var lineHeight = document.getElementById('content').style.lineHeight;

ログイン後にコピー

パディングと行間スペースの考慮

パディング、行間スペース、またはその他の要素に影響を与える可能性のある要素を考慮して、この計算をさらに調整する必要がある場合があることに注意してください。 div 内のテキストが占める垂直スペース。

テスト例

より包括的な例として、行の高さを明示的に設定する完全に自己完結型のテストを提供してみましょう。 :

<code class="javascript">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>

ログイン後にコピー

<code class="html"><body onload="countLines();">
  <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>
</body></code>

ログイン後にコピー

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