当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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