数据结构
网络
关系数据库管理系统
操作系统
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.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标签中元素的数量。
算法
步骤 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.com/<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 次查看
