HTML Style textAlign用法及代碼示例

DOM樣式的textAlign屬性與CSS中的text-align屬性非常相似，它為block元素的內部內容設置對齊方式。唯一的區別是，就像其他任何HTML DOM屬性一樣，我們可以使用JavaScript以編程方式對其進行處理。

用法
我們可以通過兩種不同的方式使用textAlign，一種設置對齊方式，另一種獲取當前對齊方式。

從當前DOM對象獲取值。
```
object.style.textAlign
```

設置當前DOM對象的值。

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

屬性值：

left：這是默認值。內容將對齊到左側。
right：內容對齊到右側。
center：這將內容設置為左右邊之間的中心。
justify：這會在單詞之間引入額外的空格，以使該行的第一個單詞與左側對齊，最後一個單詞與右側對齊。
inherit：它不會做任何花哨的事情，而是將值設置為其直接父級的值完全相同。

例：

<!DOCTYPE html> 
<html> 
  
<head>  
    <title> 
        HTML | DOM Style textAlign Property 
    </title> 
    <style> 
        #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; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="box-element" class="screen-center"> 
        <p id="inside-content"> 
          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. 
        </p> 
    </div> 
  
    <div id="controls" class="screen-center"> 
        
        <label>Set Alignment:</label> 
        
        <select id="alignment"> 
            <option value="left" default>Left</option> 
            <option value="right">Right</option> 
            <option value="center">Center</option> 
            <option value="justify">Justify</option> 
        </select> 
  
        <button id="do-align">Set Align Property</button> 
    </div> 
  
    <script type="text/javascript"> 
        //  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; 
        } 
    </script> 
</body> 
  
</html>

輸出：

設置alingn屬性之前：
設置alingn屬性後：

支持的瀏覽器：HTML | DOM樣式textAlign屬性在下麵列出：

穀歌瀏覽器
IE瀏覽器
火狐瀏覽器
Opera
Safari

相關用法

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