Bagaimana untuk Mengira Garis Teks dengan Cekap dalam Elemen DOM?-tutorial js-php.cn

Bagaimana untuk Mengira Garis Teks dengan Cekap dalam Elemen DOM?

Mary-Kate Olsen

Lepaskan： 2024-11-02 20:02:30

asal

782 orang telah melayarinya

How to Efficiently Count Text Lines within a DOM Element?

Mengira Garis Teks dalam Elemen DOM

Menentukan bilangan baris dalam elemen div yang ditetapkan boleh dilakukan melalui pelbagai pendekatan. Pertimbangkan div tertentu dengan kandungan berikut:

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

Salin selepas log masuk

Bilangan baris dalam div ini boleh berubah-ubah berdasarkan pelbagai faktor, seperti lebar div, saiz fon dan ketinggian baris. Untuk mengira garisan ini dengan tepat, kami boleh menggunakan teknik berikut:

Menggunakan Ketinggian Div dan Ketinggian Garis

Jika ketinggian div dipengaruhi secara langsung oleh kandungannya, kita boleh kira bilangan garisan menggunakan formula berikut:

Number of Lines = Div Height / Line Height

Salin selepas log masuk

Untuk mendapatkan ketinggian div, gunakan:

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

Salin selepas log masuk

Untuk mendapatkan semula ketinggian garisan, gunakan:

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

Salin selepas log masuk

Perakaunan untuk Padding dan Jarak Antara Baris

Perhatikan bahawa pengiraan ini mungkin perlu dilaraskan selanjutnya untuk mengambil kira padding, jarak antara baris atau faktor lain yang boleh menjejaskan ruang menegak yang diduduki oleh teks dalam div.

Contoh Ujian

Untuk contoh yang lebih komprehensif, mari sediakan ujian serba lengkap yang menetapkan ketinggian garisan secara eksplisit :

<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>

Salin selepas log masuk

<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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mengira Garis Teks dengan Cekap dalam Elemen DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!