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
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;
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;
Terjemahan bahasa Cina bagi
Contohialah:
ContohDalam 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>
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;
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;
Langkah 5 −Paparkan output bilangan baris teks dalam teg span menggunakan
document.getElementById("out").innerText=numLines-1;
Terjemahan bahasa Cina bagi
Contohialah:
ContohDalam 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 tutorialspointTotal number of lines: <script> const textLines = document.getElementById("lines").innerText; const numLines = textLines.split("").length; document.getElementById("out").innerText=numLines-1; </script>
Visit us at: https://www.tutorialspoint.com/
Thank you for visiting
结论
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?
Mar 17, 2025 pm 12:20 PM
Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?
Mar 17, 2025 pm 12:27 PM
Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
