HTML Style textIndent用法及代碼示例

DOM樣式textIndent屬性用於縮進每個文本塊中的第一行。它還采用負值。如果該值為負，則第一行將向左縮進。

用法:

它用於設置textIndent屬性：

object.style.textIndent = "length|%|initial|inherit"

它用於獲取textIndent屬性：
```
object.style.textIndent
```

屬性：

length:它用於根據px，pt，cm，em等設置固定縮進。length的默認值為0。
百分比(％)：與元素的寬度相比，它用於定義以％為單位的縮進。
initial:它用於將text-indent屬性設置為其默認值。

返回值：它返回一個字符串值，該字符串值表示每個文本塊中第一行的縮進。
例子：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            DOM Style text-indent Property  
        </title>  
          
        <style>  
            #sudo {  
                text-indent:40px;  
            }  
              
        </style>  
    </head>  
      
    <body>  
        <h1 style = "color:green;">GeeksforGeeks</h1>  
        <h2>DOM Style text-indent Property</h2>  
          
        <h2>text-indent:40px:</h2>  
        <div id = "sudo">  
            Prepare for the Recruitment drive of product  
            based companies like Microsoft, Amazon, Adobe  
            etc with a free online placement preparation  
            course. The course focuses on various MCQ's  
            & Coding question likely to be asked in the  
            interviews & make your upcoming placement  
            season efficient and successful.  
        </div>  
        <button type="button" onclick="myGeeks()">Submit</button> 
  
     <!-- Script to change the textIndent to 120px from 40px-->
     <script> 
   function myGeeks() { 
     document.getElementById("sudo").style.textIndent = "120px"; 
       } 
   </script> 
        </body>  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

示例2：獲取text-indent的值。

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            DOM Style text-indent Property  
        </title>  
    </head>  
      
    <body>  
        <h1 style = "color:green;">GeeksforGeeks</h1>  
        <h2>DOM Style text-indent Property</h2>  
           
        <div id = "sudo" style="text-indent:100px;">  
            Prepare for the Recruitment drive of product  
            based companies like Microsoft, Amazon, Adobe  
            etc with a free online placement preparation  
            course. The course focuses on various MCQ's  
            & Coding question likely to be asked in the  
            interviews & make your upcoming placement  
            season efficient and successful.  
        </div>  
        <button type="button" onclick="myGeeks()">Submit</button> 
  
     <script> 
   function myGeeks() { 
     alert(document.getElementById("sudo").style.textIndent); 
       } 
   </script> 
        </body>  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

支持的瀏覽器：下麵列出了DOM Style textIndent支持的瀏覽器：

穀歌瀏覽器
IE瀏覽器
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 HTML | DOM Style textIndent Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。