資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 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` 屬性用於設定文字第一行的縮排。
引數
長度 - 縮排長度的單位。
% - 以父元素寬度的百分比 (%) 表示的縮排長度。
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()` 方法。我們還看到了兩個示例，在這些示例中，我們為文字縮排長度設定了預定義值和使用者輸入值。使用者可以根據自己的需求使用任何一種方法。
1K+ 次瀏覽
