HTML | DOM Style textAlign Property

The DOM style textAlign property is pretty much similar to the text-align property in the CSS, it sets the alignment for the inner content of a block element.
The only difference is that just like any other HTML DOM property, we can use JavaScript to handle it programmatically.

Syntax
We can use textAlign in two different ways, one to set the alignment, and the other to get the current alignment.

  • Get the value from the current DOM object.
    object.style.textAlign
  • Set the value of the current DOM object.
    object.style.textAlign = "left | right | center | justify | 
    initial | inherit";

Property Values:



  • left: It is the default value. The content gets aligned to the left side.
  • right: The content gets aligned to the right side.
  • center: This sets the content to the centre, between the left and right edges.
  • justify: This introduces additional spaces between the words such that the very first word of the line gets aligned to the left side and the last word to the right.
  • inherit: It does not do anything fancy rather it sets the value exactly the same as of its immediate parent.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before set alingn property:<
  • After set alingn property:

Supported Browsers: The browser supported by HTML | DOM Style textAlign Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Mozilla Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.