資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 DOM 元素內部計數文字行？
介紹
在瞭解 DOM 中的行計數之前，讓我們先了解一下什麼是 DOM？因此，DOM 就像 HTML 和 XML 文件的 API。此邏輯足以理解 DOM 是 Web 開發人員的重要概念。DOM 為 HTML 和 XML 文件提供了程式設計介面，使程式設計師能夠控制網頁的結構、外觀和內容。因此，在本文中，我們將瞭解如何在 DOM 元素中計算網頁上給定文字的行數。
方法 1：使用 scrollHeight 屬性
利用 scrollHeight 屬性是確定 DOM 元素內包含多少文字行的一種技術。此屬性返回元素的整體高度，包括任何被溢位隱藏的內容。我們可以透過將 scrollHeight 除以單行文字的高度來確定行數。
<!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>
此程式碼首先選擇 id 為“my-element”的元素，然後使用 getComputedStyle 獲取以畫素為單位的字型大小 (element)。您可以透過獲取其 fontSize、將值解析為浮點數並將元素的 scrollHeight 除以 fontSize 來確定元素中包含多少行文字。
需要注意的是，此方法可能不完全準確，因為它依賴於字型大小在整個元素中保持不變，並且忽略了可能使用的任何額外間距或邊距。此外，必須將元素設定為 overflow:visible 才能使此方法起作用。
方法 2：使用 clientHeight 屬性
使用 clientHeight 屬性是確定 DOM 元素內包含多少文字行的另一種技術。此屬性返回元素的高度，包括內容但不包括填充、邊框和捲軸。我們可以透過將 clientHeight 除以單行文字的高度來獲取行數。
<!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>
我們再次使用 document.getElementById("my-element") 選擇要計算其行數的元素。然後，我們使用 getComputedStyle(element).lineHeight 確定單行文字的高度。最後，我們將 element.clientHeight 除以 lineHeight 來計算行數。
方法 3：使用 offsetHeight 屬性
計算 DOM 元素內部文字行數的第三種方法是使用 offsetHeight 屬性。此屬性返回元素的高度，包括內容、填充和邊框，但不包括捲軸。我們可以透過將 offsetHeight 除以單行文字的高度來確定行數。
<!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>
我們再次使用 document.getElementById("my-element") 選擇要計算其行數的元素。然後，我們使用 getComputedStyle(element).lineHeight 確定單行文字的高度。最後，我們將 element.offsetHeight 除以 lineHeight 來計算行數。
請在此處注意，這些方法只會計算元素內部可見的文字行，如果元素溢位並有捲軸，則這些方法將無法計算不可見的文字行。
如果我們想計算包括不可見行在內的總行數，我們可以使用 text-line-count 等庫，該庫使用 range.getClientRects() 方法來確定總行數。
結論
這篇博文中介紹了三種確定 DOM 元素內包含多少文字行的方法。每種方法都透過將 DOM 元素的高度（由單獨的屬性確定）除以單行文字的高度來計算行數。您選擇的具體方法將取決於專案的具體規範和主頁的設計。無論您選擇哪種方法，都必須記住，這些估計可能不完全準確，因為它們基於單行文字的高度，而單行文字的高度可能會根據所選的字型和大小而發生變化。
3K+ 閱讀量
