So zählen Sie die Anzahl der Textzeilen in einem DOM-Element
Ü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;
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>
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;
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
