JavaScript 如何设置文本行之间的距离

在本文中，我们将看到如何使用JavaScript创建用户定义的两个连续行之间的距离以美化视图。要设置行之间的距离，我们可以使用行高属性。行高属性用于设置或返回文本中行之间的距离。

语法： 行高属性的语法如下。使用以下语法为< div>元素设置行高：

line-height: normal|number|length|percentage|initial|inherit;

步骤：

我们创建一个简单的HTML文件，文件名为”demo.html”，如下所示。
我们使用标题1作为HTML代码的标题，并创建三行连续显示GeeksForGeeks。
我们还设置了一个名为”Set distance between lines”的按钮，以设置点击时两个连续行之间的距离。
现在，在script标签中，我们编写我们的JavaScript代码，该代码从HTML代码中调用”myID”标签，并更改标签内部内容的样式。它使用line-Height属性来指定两个连续行之间的距离，值为3（如下所示的代码所示）。由于我们没有给Line-Height值提供任何单位，它将解释行之间的距离为当前字体大小的倍数以设置行高。
最后，我们结束所有标签，并提供在点击”Set distance between lines”按钮之前和之后的相应输出。

示例1： 在这个示例中，我们可以尝试运行以下代码，使用JavaScript设置文本中行之间的距离。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>Heading 1</h1> 
    <p id="myID">GeeksForGeeks.<br>GeeksForGeeks<br> 
        GeeksForGeeks 
    </p> 
    <button type="button" onclick="display()"> 
        Set distance between lines 
    </button> 
    <script> 
        function display() { 
            document.getElementById("myID"). 
                style.lineHeight = "3"; 
        } 
    </script> 
</body> 
  
</html>

输出: 点击“设置行距”按钮后，生成如下所示的初始输出和下面的输出，如下图所示。

JavaScript 如何设置文本行之间的距离

示例2: 在这个示例中，我们使用了上面的方法，但是这里不是使用无单位的line-height值，而是使用像素、点、厘米等来指定行间距的单位。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>Heading 1</h1> 
    <p id="myID">GeeksForGeeks.<br>GeeksForGeeks<br> 
         GeeksForGeeks 
    </p> 
    <button type="button" onclick="display()"> 
         Set distance between lines 
    </button> 
    <script> 
        function display() { 
            document.getElementById("myID"). 
              style.lineHeight = "30px"; 
        } 
    </script> 
</body> 
  
</html>

输出： 上述程序的输出如下，在点击“设置行间距”按钮之前和之后分别显示。

JavaScript 如何设置文本行之间的距离