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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。