Wie zähle ich die Anzahl der Textzeilen in einem DOM-Element?-js-Tutorial-php.cn

Wie zähle ich die Anzahl der Textzeilen in einem DOM-Element?

Einführung

Bevor wir die Zeilenanzahl in DOM verstehen, wollen wir zunächst verstehen, was DOM ist. DOM ist also wie eine API für HTML- und XML-Dokumente. Diese Logik reicht aus, um zu verstehen, dass DOM ein wichtiges Konzept für Webentwickler ist. DOM bietet eine Programmierschnittstelle für HTML- und XML-Dokumente, die es Programmierern ermöglicht, die Struktur, das Erscheinungsbild und den Inhalt von Webseiten zu steuern. In diesem Artikel erfahren Sie, wie Sie die Anzahl der Zeilen eines bestimmten Textes in einem DOM-Element zählen.

Methode 1: Verwenden der scrollHeight-Eigenschaft

Die Verwendung der scrollHeight-Eigenschaft ist eine Technik zur Bestimmung, wie viele Textzeilen in einem DOM-Element enthalten sind. Diese Eigenschaft gibt die Höhe des Elements als Ganzes zurück, einschließlich aller durch Überlauf verborgenen Inhalte. Wir können die Anzahl der Zeilen bestimmen, indem wir scrollHeight durch die Höhe einer einzelnen Textzeile dividieren.

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

Nach dem Login kopieren

Dieser Code wählt zuerst das Element mit der ID „my-element“ aus und verwendet dann getComputedStyle, um die Schriftgröße in Pixeln (Element) zu ermitteln. Sie können bestimmen, wie viele Textzeilen in einem Element enthalten sind, indem Sie dessen Schriftgröße analysieren der Wert, der schweben soll, und die scrollHeight des Elements durch die Schriftartgröße dividieren

Es ist wichtig zu beachten, dass diese Methode möglicherweise nicht ganz genau ist, da sie davon abhängt, dass die Schriftgröße im gesamten Element konstant bleibt, und alle möglicherweise verwendeten zusätzlichen Abstände oder Ränder ignoriert. Darüber hinaus muss das Element auf overflow:visible gesetzt sein, damit diese Technik ordnungsgemäß funktioniert.

Methode 2: Verwenden Sie die clientHeight-Eigenschaft

Die Verwendung der clientHeight-Eigenschaft ist eine weitere Technik, um zu bestimmen, wie viele Textzeilen in einem DOM-Element enthalten sind. Diese Eigenschaft gibt die Höhe des Elements zurück, einschließlich Inhalt, jedoch ohne Innenabstand, Rahmen und Bildlaufleisten. Wir können die Anzahl der Zeilen ermitteln, indem wir clientHeight durch die Höhe einer einzelnen Textzeile dividieren.

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

Nach dem Login kopieren

Wir wählen erneut das Element aus, dessen Zeilen wir zählen möchten, indem wir document.getElementById("my-element") verwenden. Anschließend verwenden wir getComputedStyle(element).lineHeight, um die Höhe einer einzelnen Textzeile zu bestimmen element.clientHeight durch lineHeight, um die Anzahl der Zeilen zu berechnen

Methode 3: Verwenden Sie das offsetHeight-Attribut

Es gibt eine dritte Möglichkeit, die Anzahl der Textzeilen innerhalb eines DOM-Elements zu zählen, indem Sie das offsetHeight-Attribut verwenden. Diese Eigenschaft gibt die Höhe des Elements zurück, einschließlich Inhalt, Abstand und Rahmen, jedoch ohne Bildlaufleisten. Wir können die Anzahl der Zeilen bestimmen, indem wir offsetHeight durch die Höhe einer einzelnen Textzeile dividieren.

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

Nach dem Login kopieren

Wir wählen erneut das Element aus, dessen Zeilen wir zählen möchten, indem wir document.getElementById("my-element") verwenden. Anschließend verwenden wir getComputedStyle(element).lineHeight, um die Höhe einer einzelnen Textzeile zu bestimmen element.offsetHeight durch die lineHeight, um die Anzahl der Zeilen zu berechnen

Bitte beachten Sie, dass diese Methoden nur die Anzahl der sichtbaren Textzeilen innerhalb des Elements zählen. Wenn das Element überläuft und über Bildlaufleisten verfügt, können diese Methoden die Anzahl der unsichtbaren Textzeilen nicht zählen.

Wenn wir die Gesamtzahl der Zeilen einschließlich unsichtbarer Zeilen zählen möchten, können wir eine Bibliothek wie text-line-count verwenden, die die Methode range.getClientRects() verwendet, um die Gesamtzahl der Zeilen zu ermitteln.

Fazit

In diesem Blogbeitrag werden drei Methoden zur Bestimmung der Anzahl der in einem DOM-Element enthaltenen Textzeilen vorgestellt. Jede Methode berechnet die Anzahl der Zeilen, indem sie die Höhe des DOM-Elements (bestimmt durch eine separate Eigenschaft) durch die Höhe einer einzelnen Textzeile dividiert. Welche Methode Sie wählen, hängt von den spezifischen Spezifikationen Ihres Projekts und dem Design Ihrer Homepage ab. Für welche Methode Sie sich auch entscheiden, bedenken Sie, dass diese Schätzungen möglicherweise nicht ganz genau sind, da sie auf der Höhe einer einzelnen Textzeile basieren, die sich je nach gewählter Schriftart und -größe ändern kann.

Das obige ist der detaillierte Inhalt vonWie zähle ich die Anzahl der Textzeilen in einem DOM-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!