如何使用 JavaScript 设置文本第一行的缩进？

在本教程中，我们将学习如何使用 JavaScript 设置文本第一行的缩进。

文本第一行的缩进是开始新段落的一种常见方式。要设置缩进，请使用 textIndent 属性。

要使用 JavaScript 设置文本第一行的缩进，我们将讨论两种不同的方法 -

  • 使用 style.textIndent 属性

  • 使用 style.setProperty 方法

使用 style.textIndent 属性

元素的 style.textIndent 属性用于设置文本第一行的缩进。此属性位于元素对象中，因此我们使用 document.getElementById() 方法访问它，然后使用 style.textIndent 属性设置缩进。

语法

document.getElementById('element_id').style.textIndent = 'length | % | inherit | initial'

在上述语法中，'element_id' 是元素的 id 属性。document.getElementById() 方法用于访问元素，而 style.textIndent 属性用于设置文本第一行的缩进。

参数

  • length - 缩进长度（单位）。

  • % - 以父元素宽度的百分比 (%) 表示的缩进长度。

  • inherit - 其父元素的属性继承 text-indent 属性。

  • initial - 将 text-indent 属性设置为默认值。

示例

在下面的示例中，我们使用了 style.textIndent 属性来设置 JavaScript 中文本第一行的缩进。按钮“设置缩进”与一个点击事件相关联，该事件执行“setTextIndentation()”函数，该函数设置文本第一行的缩进。

<html>
<body>
   <h2>
      Indenting the first line of text using the <i> style.textIndent property </i> in JavaScript
   </h2>
   <div>
      <button onclick="setTextIndentation()"> Set Indentation </button>
      <div id="root" style="border: 2px solid gray; background-color: aliceblue; padding: 10px; margin: 5px 0px;">
         Welcome to Tutorialspoint. This is a demo paragraph to demonstrate the indentation of the first line of text!
      </div>
      <script>
         
         // 'Set Indentation' button click event handler function
         function setTextIndentation() {
            const root = document.getElementById('root')
            root.style.textIndent = '50px'
         }
      </script>
</body>
</html>

使用 style.setProperty() 方法

在 JavaScript 中，style.setProperty 方法设置元素的属性，无论是新的还是现有的。首先，使用 document.getElementById() 方法访问元素，然后使用 style.setProperty 方法设置“text-indent”属性。在 style.setProperty 方法的属性名称参数中应为“text-indent”，而值和优先级将根据用户的要求而定。

语法

document.getElementById('element_id').style.setProperty(property_name, value, priority)

在上述语法中，document.getElementById() 方法用于访问具有 id 属性设置为“element_id”的 HTML 元素的元素对象，然后我们在该元素对象上使用 style.setProperty 方法。

参数

  • property_name - 要设置的属性的名称。

  • value - 属性的新值。

  • priority - 属性值的优先级（可选）。

示例

在下面的示例中，我们使用了 style.setProperty 方法来设置 JavaScript 中文本第一行的缩进。使用输入字段获取用户对文本缩进长度的输入。按钮“设置缩进”与一个点击事件相关联，该事件执行“setTextIndentation()”函数，该函数根据用户的输入设置文本第一行的缩进。

<html>
<body>
   <h2>
      Indenting the first line of text using the <i> style.setProperty method </i> in JavaScript
   </h2>
   <div>
      <h4> Enter the length of the indentation (in px or %): </h4>
      <input type="text" name="indentation" id="indentation" value="40px">
      <button onclick="setTextIndentation()"> Set Indentation </button>
      <div id="root" style="border: 2px solid gray; background-color: aliceblue; padding: 10px; margin: 5px 0px;">
         Welcome to Tutorialspoint. This is a demo paragraph to demonstrate the indentation of the first line of text. The indentation length will be sets by the input field's value!
      </div>
      <script>
         
         // 'Set Indentation' button click event handler function
         function setTextIndentation() {
            const root = document.getElementById('root')
            
            // user input value for the length of the indentation
            const indentation = document.getElementById('indentation').value
            root.style.setProperty('text-indent', indentation)
         }
      </script>
</body>
</html>

在本教程中，我们学习了如何使用 JavaScript 设置文本第一行的缩进。我们使用了两种方法，一种是使用 style.textIndent 属性，另一种是使用 style.setProperty() 方法。我们还看到了两个示例，在这些示例中，我们为文本缩进长度设置了预定义值和用户输入值。用户可以根据自己的需要使用任何一种方法。

更新于: 2022年11月15日

1K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告