Heim >Web-Frontend >HTML-Tutorial >So zählen Sie die Anzahl der Textzeilen in einem DOM-Element
So zählen Sie die Anzahl der Textzeilen in einem DOM-Element
- 王林nach vorne
- 2023-08-20 17:49:431337Durchsuche
Übersicht
Die Anzahl der Textzeilen innerhalb des Document Object Model (DOM)-Elements, ob es sich um ein
handelt, kann hauptsächlich in zwei Ansätzen festgelegt werden Wir werden die „offsetHeight“, also die Höhe des DOM-Elements, durch die Zeilenhöhe in der Ausgabe dividieren, was die Gesamtzahl der Zeilen ergibt
Bei der zweiten Methode verwenden wir die Methode split() des Arrays, wobei wir das Zeilenumbruchzeichen als Parameter übergeben. Das Array wird also aus den Elementen vor und nach dem Zeilenumbruchzeichen erstellt und wir berechnen die Länge des Arrays.
Algorithmus
Schritt 1 - Erstellen Sie eine HTML-Vorlage und fügen Sie darin ein div-Element mit der Zeilenhöhe hinzu. Erstellen Sie außerdem ein Span-Tag, in dem die Ausgabe generiert wird
Schritt 2 − Greifen Sie nun im Skript-Tag auf das übergeordnete Element der Zeile zu. Verwenden Sie offsetHeight, um die Gesamthöhe des übergeordneten Elements zu berechnen.
var domHeight = a.offsetHeight;
Schritt 3 − Verwenden Sie das Stilattribut, um den Zeilenhöhenwert der Zeile zu erhalten. Da der Zeilenhöhenwert auch die Einheit „px“ enthält, müssen wir die Funktion parseInt() verwenden, um daraus die Zahl zu erhalten.
Schritt 4 − Teilen Sie nun die extrahierten Werte auf, nämlich domHeight und line-height.
var totalLines = domHeight / linesHeight;Schritt 5 – Die Variable „totalLines“ enthält die Anzahl der Zeilen im übergeordneten Element. Dadurch wird die Anzahl der Zeilen im Span-Tag zurückgegeben.
Die chinesische Übersetzung von
Beispiellautet:
BeispielIn diesem Beispiel zählen wir die Anzahl der Zeilen, indem wir die Höhe des gesamten Document Object Model (DOM)-Elements berechnen, die Eigenschaft
offsetHeight verwenden, um die Höhe des DOM-Elements zu ermitteln, und die DOM-Höhe durch die Zeile dividieren height, wodurch wir die Gesamtzahl der im DOM vorhandenen Zeilen ausgeben.
<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>
Das Bild unten zeigt die Ausgabe des obigen Beispiels. Es enthält die Zeilenhöhe „30px“, die die „offsetHeight“ des DOM-Elements aufteilt, und gibt die Anzahl der Elemente im Span-Tag zurück. Algorithmus
Schritt 1−Erstellen Sie eine HTML-Vorlage und fügen Sie ein div-Element hinzu. Erstellen Sie ein Span-Tag, das zum Generieren der Ausgabe verwendet wird.
Schritt 2− Greifen Sie nun mit document.getElementById(). auf den Text im übergeordneten Element zu
const textLines = document.getElementById("lines").innerText;
Schritt 3−Verwenden Sie die Methode arraysplit() und übergeben Sie ihr das Zeilenumbruchzeichen („
“) als Parameter. Die Split-Methode speichert die Textzeile als ein Element in einem Array.
Schritt 4−Jetzt verwenden wir die Längenmethode des Arrays, um die Länge eines Arrays zu berechnen, die die Anzahl der Textzeilen im Element zurückgibt.
const numLines = textLines.split("").length;
Schritt 5 −Zeigen Sie die Ausgabe der Anzahl der Textzeilen im Span-Tag mit an
document.getElementById("out").innerText=numLines-1;
Hier haben wir eins von „numLines“ abgezogen, da es ein zusätzliches Zeilenumbruchelement enthält, das vor dem Anfang aller Textzeilen eingefügt wird. Die chinesische Übersetzung von
Beispiellautet:
BeispielIn diesem Beispiel berechnen wir die Anzahl der Zeilen mithilfe der Array-Split()-Methode, mit der wir auf das DOM in einer Variablen zugreifen und mit Hilfe der Split(“
”)-Methode
eine Zeile übergeben break als Argument, das alle Elemente in einem Array als Zeilenumbrüche speichert. Anschließend berechnen wir die Länge eines Arrays, das die Anzahl der im DOM verfügbaren Textzeilen zurückgibtCount 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
Das folgende Bild zeigt die Ausgabe des obigen Beispiels, in dem alle drei Textzeilen als Element im Array gespeichert sind. Bei der Berechnung der Länge eines Arrays wird also 3, zurückgegeben
结论
Im ersten Beispiel mussten wir den Wert der Zeilenhöhe mit parseInt() analysieren, da er auch den Zeichenfolgenwert enthält und wenn wir diesen Wert vom „offsetHeight“-Wert dividieren, wird (NaN) zurückgegeben, was bedeutet „Keine Nummer“. Wir hatten also parseInt() verwendet, können aber auch parseFloat() verwenden, wenn wir es im Dezimalformat zurückgeben möchten.
Das obige ist der detaillierte Inhalt vonSo zählen Sie die Anzahl der Textzeilen in einem DOM-Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!