如何計算DOM元素內的文字行數-html教學-PHP中文網

首頁

web前端

html教學

如何計算DOM元素內的文字行數

王林

Aug 20, 2023 pm 05:49 PM

計算行數dom文字行數

如何計算DOM元素內的文字行數

Overview

The number of the text lines inside the Document Object Model (DOM) element whether it would be any element that is

or can be delwoate mainly in tiber approaches. first approach we will be dividing the “offsetHeight” that is height of the DOM element with the line height in output which will give the total number of lines.

在第二種方法中，我們將使用陣列的split()方法，其中我們將把換行符號作為參數傳遞。因此，數組將由換行符號前後的元素創建，並且我們將計算數組的長度。

Algorithm

Step 1 − Create a HTML template, add a div element in it with line-height. Line-height is the height of the particular line. Also create a span tag in which the output will be generated.

步驟2 − 現在在腳本標籤中存取資料列的父元素。使用offsetHeight計算父元素的總高度。

var domHeight = a.offsetHeight;

步驟 3 − 使用樣式屬性取得行的行高值。由於行高值也包含單位“px”，因此我們需要使用parseInt()函數從中取得數字。

第四步驟 − 現在將擷取的值，即domHeight和line-height進行分割。

var totalLines = domHeight / linesHeight;

第5步- 變數「totalLines」包含父元素中的行數。這將傳回span標籤中的行數。

Example

的中文翻譯為：

範例

在這個範例中，我們將透過計算整個文件物件模型（DOM）元素的高度來統計行數，使用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://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>

在下面的圖像中，它顯示了上面範例的輸出。其中包含了「30px」的行高，它將DOM元素的「offsetHeight」分割，並傳回span標籤中元素的數量。

Algorithm

步驟 1 − 建立一個HTML模板，在其中新增一個div元素。建立一個span標籤，用於產生輸出。

Step 2 − Now access the text inside the parent element using the document.getElementById().

const textLines = document.getElementById("lines").innerText;

步驟3 − 使用陣列#split()方法，將換行符號（「

#」）作為參數傳遞給它。 split方法將文字的行儲存在陣列中作為一個元素。

Step 4 − Now we will use the length method of array to calculate the length of an array which will return the number of text lines in the element.

const numLines = textLines.split("").length;

Step 5 − Display the output of the number of text lines in span tag using

document.getElementById("out").innerText=numLines-1;

在這裡，我們從「numLines」中減去了一個，因為它包含了一個額外的換行元素，該元素在所有文字行開始之前被插入。

Example

的中文翻譯為：

範例

In this example, we will calculate the number of lines by using the array split() method in which we will access the DOM in a variable and with the help of split(“

” ) method we will pass a line break as argument which will store all the element in an array as the line breaks. After which we will calculate the length of an array, which will return the number of text lines array, which will return the number of text lines arrayable .



   Count the text lines inside of DOM element


   
      Welcome to tutorialspoint

      Visit us at: https://www.tutorialspoint.com/

      Thank you for visiting

   
   
      Total number of lines:
      
   
   <script>
      const textLines = document.getElementById(&quot;lines&quot;).innerText;
      const numLines = textLines.split(&quot;&quot;).length;
      document.getElementById(&quot;out&quot;).innerText=numLines-1;
   </script>

In the below image, it shows the output of the above example. In which all the three text lines are stored in the array as an element. So on calculating the length of an array it will return 3.##

結論

在第一個範例中，我們必須使用parseInt() 來解析行高的值，因為它也包含字串值，如果我們將該值除以「offsetHeight」值，那麼它將傳回( NaN ) 意思是「不是數字」。所以我們使用了parseInt()，但是如果我們想以十進位形式傳回它，我們也可以使用parseFloat()。

以上是如何計算DOM元素內的文字行數的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。