数据结构
网络
关系数据库管理系统
操作系统
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+ 阅读量
