Cara mengira bilangan baris teks di dalam elemen DOM-html tutorial-php.cn

Cara mengira bilangan baris teks di dalam elemen DOM

王林

Lepaskan： 2023-08-20 17:49:43

ke hadapan

1243 orang telah melayarinya

Cara mengira bilangan baris teks di dalam elemen DOM

Gambaran Keseluruhan

Bilangan baris teks di dalam elemen Document Object Model (DOM) sama ada mana-mana elemen yang

atau boleh disengajakan terutamanya dalam dua pendekatan kami akan membahagikan "offsetHeight" iaitu ketinggian elemen DOM dengan ketinggian baris dalam output yang akan memberikan jumlah baris

Dalam kaedah kedua, kami akan menggunakan kaedah split() tatasusunan, di mana kami akan menghantar aksara baris baharu sebagai parameter. Jadi tatasusunan akan dibuat daripada elemen sebelum dan selepas aksara baris baharu dan kami akan mengira panjang tatasusunan.

Algoritma

Langkah 1 − Buat templat HTML, tambahkan elemen div di dalamnya dengan ketinggian garis ialah ketinggian baris tertentu Juga buat teg span di mana output akan dijana

Langkah 2 − Sekarang akses elemen induk baris dalam teg skrip. Gunakan offsetHeight untuk mengira jumlah ketinggian elemen induk.

var domHeight = a.offsetHeight;

Salin selepas log masuk

Langkah 3 − Gunakan atribut gaya untuk mendapatkan nilai ketinggian baris bagi baris. Oleh kerana nilai ketinggian baris juga mengandungi unit "px", kita perlu menggunakan fungsi parseInt() untuk mendapatkan nombor daripadanya.

Langkah 4 − Sekarang bahagikan nilai yang diekstrak, iaitu domHeight dan line-height.

var totalLines = domHeight / linesHeight;

Salin selepas log masuk

Langkah 5 - Pembolehubah "totalLines" mengandungi bilangan baris dalam elemen induk. Ini akan mengembalikan bilangan baris dalam teg span.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh ini, kami akan mengira bilangan baris dengan mengira ketinggian keseluruhan elemen Model Objek Dokumen (DOM), menggunakan sifat

offsetHeight untuk mendapatkan ketinggian elemen DOM dan membahagikan ketinggian DOM dengan baris ketinggian, yang akan memberi kami Output jumlah bilangan baris yang terdapat dalam DOM.

<html>
<head>
   <title>Count the text lines inside of DOM element</title>
</head>
<body>
   <div id="lines" style="line-height: 30px;">
      Welcome to tutorialspoint<br>
      Visit us at: https://www.tutorialspoint.com/<br>
      Buy the course of your domain <br>
      Get the certificate <br>
      Thank you for visiting<br>
   </div>
   <strong style="border: 2px solid black; padding: 0.1rem;">
      Total number of lines:
      <span id="out"></span>
   </strong>
   <script>
      var a = document.getElementById("lines");
      var domHeight = a.offsetHeight;
      var linesHeight = parseInt(a.style.lineHeight);
      var totalLines = domHeight / linesHeight;
      document.getElementById("out").innerText=totalLines;
   </script>
</body>
</html>

Salin selepas log masuk

Dalam imej di bawah, ia menunjukkan output contoh di atas. Ia mengandungi ketinggian baris "30px", yang membahagikan "offsetHeight" elemen DOM dan mengembalikan bilangan elemen dalam teg span.

Algoritma

Langkah 1−Buat templat HTML dan tambahkan elemen div di dalamnya. Buat teg span yang digunakan untuk menjana output.

Langkah 2−Sekarang akses teks di dalam elemen induk menggunakan document.getElementById().

const textLines = document.getElementById("lines").innerText;

Salin selepas log masuk

Langkah 3−Gunakan kaedah tatasusunansplit(), menghantar aksara baris baharu ("

") kepadanya sebagai parameter. Kaedah split menyimpan baris teks sebagai satu elemen dalam tatasusunan.

Langkah 4− Sekarang kita akan menggunakan kaedah panjang tatasusunan untuk mengira panjang tatasusunan yang akan mengembalikan bilangan baris teks dalam elemen.

const numLines = textLines.split("").length;

Salin selepas log masuk

Langkah 5 −Paparkan output bilangan baris teks dalam teg span menggunakan

document.getElementById("out").innerText=numLines-1;

Salin selepas log masuk

Di sini, kami menolak satu daripada "numLines" kerana ia mengandungi elemen pemisah baris tambahan yang disisipkan sebelum permulaan semua baris teks.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh ini, kami akan mengira bilangan baris dengan menggunakan kaedah array split() di mana kami akan mengakses DOM dalam pembolehubah dan dengan bantuan

split(“

”)
kaedah kami akan melepasi garisan break sebagai argumen yang akan menyimpan semua elemen dalam tatasusunan apabila baris itu terputus. Selepas itu kita akan mengira panjang tatasusunan, yang akan mengembalikan bilangan baris teks yang tersedia dalam DOM
Count the text lines inside of DOM element
Welcome to tutorialspoint
Visit us at: https://www.tutorialspoint.com/
Thank you for visiting

Total number of lines: <script> const textLines = document.getElementById("lines").innerText; const numLines = textLines.split("").length; document.getElementById("out").innerText=numLines-1; </script>
Salin selepas log masuk
Dalam imej di bawah, ia menunjukkan output contoh di atas di mana ketiga-tiga baris teks disimpan dalam tatasusunan sebagai elemen Jadi apabila mengira panjang tatasusunan ia akan mengembalikan 3.

结论

Dalam contoh pertama kita perlu menghuraikan nilai ketinggian baris dengan parseInt() kerana ia mengandungi nilai rentetan juga dan jika kita membahagikan nilai itu daripada nilai "offsetHeight" maka ia akan kembali (NaN) yang bermaksud "Bukan Nombor". Jadi kami telah menggunakan parseInt(), tetapi kami juga boleh menggunakan parseFloat() jika kami mahu mengembalikannya dalam perpuluhan.

Atas ialah kandungan terperinci Cara mengira bilangan baris teks di dalam elemen DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!