資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在DOM元素內部計數文字行
概述
文件物件模型 (DOM) 元素內部的文字行數，無論該元素是 <div>、<p> 還是 <label>，都可以透過兩種主要方法來確定。在第一種方法中，我們將把DOM元素的高度“offsetHeight”除以輸出中的行高，這將給出總行數。
在第二種方法中，我們將使用陣列的split()方法，其中我們將傳遞換行符字面量作為引數。因此，將建立包含換行符前後元素的陣列，我們將計算陣列的長度。
演算法
步驟 1 − 建立一個HTML模板，在其中新增一個具有行高的div元素。行高是特定行的高度。還在其中生成輸出的span標籤中。
步驟 2 − 現在在指令碼標籤內訪問行的父元素。使用offsetHeight計算父元素的總高度。
var domHeight = a.offsetHeight;
步驟 3 − 使用style屬性獲取行的行高值。由於行高值也包含單位“px”，因此我們必須使用parseInt()從中獲取數字。
步驟 4 − 現在除以提取的值，即domHeight和行高。
var totalLines = domHeight / linesHeight;
步驟 5- 變數“totalLines”包含父元素中的行數。這將返回span標籤中的行數。
示例
在此示例中，我們將透過使用offsetHeight屬性計算完整DOM元素的高度並將其除以行高來計算任何文件物件模型 (DOM) 元素中的行數，這將使我們能夠獲得DOM中存在的總行數作為輸出。
<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://tutorialspoint.tw/<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>
在下圖中，它顯示了上述示例的輸出。其中它包含“30px”的行高，它除以DOM元素的“offsetHeight”並返回span標籤中元素的數量。
演算法
步驟 1 − 建立一個HTML模板，在其中新增一個div元素。建立一個span標籤，在其中生成輸出。
步驟 2 − 現在使用document.getElementById()訪問父元素內的文字。
const textLines = document.getElementById("lines").innerText;
步驟 3 − 使用陣列split()方法，將換行符字面量（“
”）作為引數傳遞給它。split方法將文字中的行作為元素儲存在陣列中。
步驟 4 − 現在，我們將使用陣列的length方法來計算陣列的長度，這將返回元素中的文字行數。
const numLines = textLines.split("
").length;
步驟 5 − 使用以下方法在span標籤中顯示文字行數的輸出
document.getElementById("out").innerText=numLines-1;
在這裡，我們從“numLines”中減去了 1，因為它包含一個額外的換行符元素，該元素是在所有文字行開始之前插入的。
示例
在此示例中，我們將使用陣列split()方法計算行數，在該方法中，我們將訪問變數中的DOM，並藉助split(“
”)方法，我們將傳遞換行符作為引數，這將把所有元素儲存在陣列中作為換行符。之後，我們將計算陣列的長度，這將返回DOM中可用的文字行數。
<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://tutorialspoint.tw/<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>
const textLines = document.getElementById("lines").innerText;
const numLines = textLines.split("
").length;
document.getElementById("out").innerText=numLines-1;
</script>
</body>
</html>
在下圖中，它顯示了上述示例的輸出。其中所有三行文字都作為元素儲存在陣列中。因此，在計算陣列的長度時，它將返回 3。
結論
在第一個示例中，我們必須使用parseInt()解析行高的值，因為它也包含字串值，如果我們用“offsetHeight”值除以該值，則它將返回(NaN)，這意味著“不是數字”。因此，我們使用了parseInt()，但如果我們想以十進位制形式返回它，我們也可以使用parseFloat()。
801 次檢視
