如何使用 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 属性设置为 default。
示例
在下面的示例中，我们使用 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() 方法。我们还看到了两个示例，其中我们为文本缩进的长度设置了预定义值和用户输入值。用户可以根据自己的需求使用其中任何一种方法。
