Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengira bilangan baris teks di dalam elemen DOM?
Bagaimana untuk mengira bilangan baris teks di dalam elemen DOM?
- WBOYke hadapan
- 2023-08-22 19:21:041084semak imbas
Pengenalan
Sebelum memahami kiraan baris dalam DOM, mari kita fahami dahulu apakah itu DOM? Jadi, DOM adalah seperti API untuk dokumen HTML dan XML. Logik ini sudah cukup untuk memahami bahawa DOM adalah konsep penting untuk pembangun web. DOM menyediakan antara muka pengaturcaraan untuk dokumen HTML dan XML, membenarkan pengaturcara mengawal struktur, penampilan dan kandungan halaman web. Jadi, dalam artikel ini, kita akan melihat cara mengira bilangan baris teks yang diberikan dalam elemen DOM.
Kaedah 1: Menggunakan scrollHeight Property
Menggunakan sifat scrollHeight ialah teknik untuk menentukan bilangan baris teks yang terkandung dalam elemen DOM. Sifat ini mengembalikan ketinggian elemen secara keseluruhan, termasuk sebarang kandungan yang disembunyikan oleh limpahan. Kita boleh menentukan bilangan baris dengan membahagikan scrollHeight dengan ketinggian satu baris teks.
<!DOCTYPE html>
<html>
<body>
<div id="my-element">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
<div id="result"></div>
<script>
window.onload = function() {
let element = document.getElementById("my-element");
let fontSize = parseFloat(getComputedStyle(element).fontSize);
let numberOfLines = element.scrollHeight / fontSize;
document.getElementById("result").innerHTML = numberOfLines;
}
</script>
</body>
</html>
Kod ini mula-mula memilih elemen dengan id "elemen saya" dan kemudian menggunakan getComputedStyle untuk mendapatkan saiz fon dalam piksel (elemen Anda boleh menentukan bilangan baris teks yang disertakan dalam elemen dengan mengambil Saiz fonnya, menghurai). nilai untuk terapung, dan membahagikan scrollHeight dengan fontSize
Adalah penting untuk ambil perhatian bahawa kaedah ini mungkin tidak tepat sepenuhnya kerana ia bergantung pada saiz fon yang kekal malar merentas elemen dan mengabaikan sebarang jarak atau margin tambahan yang mungkin telah digunakan. Selain itu, elemen mesti ditetapkan kepada overflow:visible untuk teknik ini berfungsi dengan betul.
Kaedah 2: Gunakan property clientHeight
Menggunakan sifat clientHeight ialah satu lagi teknik untuk menentukan bilangan baris teks yang terkandung dalam elemen DOM. Sifat ini mengembalikan ketinggian elemen, termasuk kandungan tetapi tidak termasuk pelapik, jidar dan bar skrol. Kita boleh mendapatkan bilangan baris dengan membahagikan clientHeight dengan ketinggian satu baris teks.
<!DOCTYPE html>
<html>
<body>
<div id="my-element">
This code first select the element with id 'my-element' and gets the font-size in
pixels using getComputedStyle(element).fontSize and parse the value to float and divide
the scrollHeight of the element by fontSize which will give you the number of lines of
text inside the element. It's worth noting that this method may not be 100% accurate,
as it relies on the font size being consistent throughout the element and doesn't take
into account any additional spacing or margins that may be applied. Also, this method
only works if the element is set to have overflow:visible.
</div>
<div id="result"></div>
<script>
window.onload = function () {
let element = document.getElementById("my-element");
let fontSize = parseFloat(getComputedStyle(element).fontSize);
let numberOfLines = element.clientHeight / fontSize;
document.getElementById("result").innerHTML = numberOfLines;
};
</script>
</body>
</html>
Kami sekali lagi memilih elemen yang kami mahu mengira baris menggunakan document.getElementById("my-element"). Kami kemudiannya menggunakan getComputedStyle(elemen).lineHeight untuk menentukan ketinggian satu baris teks element.clientHeight by the lineHeight untuk mengira bilangan baris
Kaedah 3: Gunakan atribut offsetHeight
Terdapat cara ketiga untuk mengira bilangan baris teks dalam elemen DOM dengan menggunakan atribut offsetHeight. Sifat ini mengembalikan ketinggian elemen, termasuk kandungan, pelapik dan sempadan, tetapi tidak termasuk bar skrol. Kita boleh menentukan bilangan baris dengan membahagikan offsetHeight dengan ketinggian satu baris teks.
<!DOCTYPE html>
<html>
<body>
<div id="my-element">There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour, or randomised words
which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem
Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the
first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined
with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</div>
<div id="result"></div>
<script>
window.onload = function() {
let element = document.getElementById("my-element");
let fontSize = parseFloat(getComputedStyle(element).fontSize);
let numberOfLines = Math.ceil(element.offsetHeight / fontSize);
document.getElementById("result").innerHTML = numberOfLines;
}
</script>
</body>
</html>
Kami sekali lagi memilih elemen yang kami mahu mengira baris menggunakan document.getElementById("my-element"). Kami kemudiannya menggunakan getComputedStyle(elemen).lineHeight untuk menentukan ketinggian satu baris teks element.offsetHeight by the lineHeight untuk mengira bilangan baris
Sila ambil perhatian bahawa kaedah ini hanya mengira bilangan baris teks yang boleh dilihat dalam elemen, jika elemen melimpah dan mempunyai bar skrol, kaedah ini tidak akan dapat mengira bilangan baris teks yang tidak kelihatan.
Jika kita ingin mengira jumlah bilangan baris termasuk baris tidak kelihatan, kita boleh menggunakan perpustakaan seperti text-line-count yang menggunakan kaedah range.getClientRects() untuk menentukan jumlah bilangan baris.
Kesimpulan
Catatan blog ini memperkenalkan tiga kaedah untuk menentukan bilangan baris teks yang terkandung dalam elemen DOM. Setiap kaedah mengira bilangan baris dengan membahagikan ketinggian elemen DOM (ditentukan oleh sifat berasingan) dengan ketinggian satu baris teks. Kaedah yang anda pilih akan bergantung pada spesifikasi khusus projek anda dan reka bentuk halaman utama anda. Mana-mana kaedah yang anda pilih, perlu diingat bahawa anggaran ini mungkin tidak tepat sepenuhnya kerana ia berdasarkan ketinggian satu baris teks, yang mungkin berubah bergantung pada fon dan saiz yang dipilih.
Atas ialah kandungan terperinci Bagaimana untuk mengira bilangan baris teks di dalam elemen DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!