HTML | DOM 样式 textAlign 属性

DOM 样式的textAlign属性与 CSS 中的 text-align属性非常相似，它设置块元素内部内容的对齐方式。
唯一的区别是，就像任何其他HTML DOM 属性一样，我们可以使用JavaScript以编程方式处理它。

句法
我们可以通过两种不同的方式使用 textAlign，一种是设置对齐方式，另一种是获取当前对齐方式。

• 从当前 DOM 对象中获取值。

  object.style.textAlign

• 设置当前 DOM 对象的值。

  object.style.textAlign = "left | right | center | justify | 
  initial | inherit";

属性值：

• left ：这是默认值。内容与左侧对齐。
• right ：内容与右侧对齐。
• center ：这将内容设置为中心，左右边缘之间。
• justify ：这会在单词之间引入额外的空格，使得该行的第一个单词与左侧对齐，最后一个单词在右侧对齐。
• inherit ：它不会做任何花哨的事情，而是将值设置为与其直接父级完全相同的值。

例子：

  
 
    
        HTML | DOM Style textAlign Property
    
    
        #box-element {
            border: 1px solid #ff8888;
            background-color: #ffaaaa;
        }
          
        .screen-center {
            margin: 30px auto;
            width: 400px;
        }
          
        #controls {
            text-align: center;
        }
          
        #inside-content {
            font-size: 0.8rem;
        }
    

  

  
    
        
          An operating system acts as an intermediary
          between the user of a computer and computer 
          hardware. The purpose of an operating system
          is to provide an environment in which a user
          can execute programs in a convenient and 
          efficient manner. An operating system is 
          software that manages the computer hardware. 
          The hardware must provide appropriate mechanisms 
          to ensure the correct operation of the computer
          system and to prevent user programs from 
          interfering with the proper operation of 
          the system.
        
    
  
    
        
        Set Alignment: 
        
        
            Left
            Right
            Center
            Justify
        
  
        Set Align Property
    
  
    
        //  Collecting elements  
        let inside_content = document.getElementById(
          "inside-content");
        let align_option = document.getElementById(
          "alignment");
        let align_btn = document.getElementById(
          "do-align");
  
        //  Adding an event to the button    
        align_btn.onclick = function() {
  
            //    Get current value from the dropdown    
            let align_val = 
            align_option.options[align_option.selectedIndex].value;
  
            //    Set this value to alignment of the content
            inside_content.style.textAlign = align_val;
        }
    

  

输出：

• 设置alingn属性前：<
• 设置 alingn 属性后：
  

支持的浏览器： HTML支持的浏览器 | DOM Style textAlign 属性列举如下：

• 谷歌浏览器
• IE浏览器
• 火狐浏览器
• 歌剧
• 苹果浏览器