Bagaimana untuk mengira bilangan baris teks di dalam elemen DOM?-tutorial js-php.cn

Bagaimana untuk mengira bilangan baris teks di dalam elemen DOM?

WBOY

Lepaskan： 2023-08-22 19:21:04

ke hadapan

1148 orang telah melayarinya

Bagaimana untuk mengira bilangan baris teks di dalam elemen DOM?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!