DOM 要素内のテキストの行数をカウントする方法

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃概要＃＃＃

ドキュメント オブジェクト モデル (DOM) 要素内のテキスト行の数は、それが

、

、または のいずれの要素であっても、主に 2 つのアプローチで計画できます。最初のアプローチでは、DOM 要素の高さである「offsetHeight」を出力の行の高さで除算し、総行数を求めます。 2 番目のメソッドでは、配列の Split() メソッドを使用し、改行文字をパラメータとして渡します。したがって、改行文字の前後の要素から配列が作成され、配列の長さを計算します。

＃＃＃アルゴリズム＃＃＃

ステップ1

-HTMLテンプレートを作成し、line-heightを使用してdiv要素を追加します。Line-heightは特定の行の高さです。また、出力が次のようになるspanタグも作成します生成されました。

ステップ 2

−

ここで、script タグ内の行の親要素にアクセスします。 offsetHeight を使用して、親要素の合計の高さを計算します。 リーリー

ステップ 3 − style 属性を使用して、行の行の高さの値を取得します。行の高さの値には単位「px」も含まれているため、parseInt() 関数を使用してそこから数値を取得する必要があります。

ステップ 4 − 次に、抽出された値、つまり domHeight と line-height を分割します。 リーリー

ステップ 5 - 変数「totalLines」には、親要素の行数が含まれます。これにより、span タグの行数が返されます。

Example の中国語訳は次のとおりです: Example この例では、ドキュメント オブジェクト モデル (DOM) 要素全体の高さを計算し、offsetHeight

プロパティを使用して DOM 要素の高さを取得し、除算することで行数をカウントします。行 High による DOM の高さ。これにより、DOM 内に存在する行の合計数が出力されます。

リーリー

以下の画像は、上記の例の出力を示しています。これには、DOM 要素の「offsetHeight」を分割する「30px」行の高さが含まれており、span タグ内の要素の数を返します。

＃＃＃アルゴリズム＃＃＃

ステップ 1

− HTML テンプレートを作成し、それに div 要素を追加します。出力の生成に使用するspanタグを作成します。

ステップ 2

− 次に、 document.getElementById(). を使用して、親要素内のテキストにアクセスします。 リーリー ステップ 3

− arraysplit() メソッドを使用して、改行文字 (「

」) を区切ります。

") がパラメータとして渡されます。 Split メソッドは、テキスト行を配列内の 1 つの要素として保存します。 ステップ 4 −

次に、配列の長さメソッドを使用して、要素内のテキスト行数を返す配列の長さを計算します。

リーリー ステップ 5

− を使用して、span タグ内のテキスト行数の出力を表示します。 リーリー ここでは、テキストのすべての行の開始前に挿入される追加の改行要素が含まれるため、「numLines」から 1 を減算します。

Example

の中国語訳は次のとおりです: Example この例では、配列のsplit()メソッドを使用して行数を計算します。このメソッドでは変数内のDOMにアクセスし、split(""を利用します) )

メソッドでは、引数として改行を渡し、配列内のすべての要素を改行として保存します。その後、配列の長さを計算し、DOM で使用可能なテキスト行数を返します。 .

リーリー

下の画像は、上記の例の出力を示しています。3 行すべてのテキスト行が要素として配列に格納されています。したがって、配列の長さを計算すると、3 が返されます。

结论

最初の例では、行の高さの値を parseInt() で解析する必要がありました。これは、行の高さの値には文字列値も含まれており、その値を「offsetHeight」値から除算すると、(NaN) が返されるためです。 ) これは「数字ではない」という意味です。したがって、これまでは parseInt() を使用していましたが、10 進数で返したい場合は parseFloat() を使用することもできます。

以上がDOM 要素内のテキストの行数をカウントする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。