How to set the indentation of the first line of text with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the indentation of the first line of text with JavaScript.

The indentation of the first line of a text is a common way to start a new paragraph. To set the indentation, use the textIndent property.

To set the indentation of the first line of text with JavaScript, we will discuss two different ways −

Using the style.textIndent Property
Using the style.setProperty Method

Using the style.textIndent Property

The style.textIndent property of an element is used to set the indentation of the first line of text. This property is placed in the element object, so we use the document.getElementById() method to access it, and then we use the style.textIndent property to set the indentation.

Syntax

document.getElementById('element_id').style.textIndent = 'length | % | inherit | initial'

In the above syntax, the ‘element_id’ is the id attribute of an element. The document.getElementById() method is used to access the element and style.textIndent property is used to set the indentation of the first line of text.

Parameters

length − The length of the indentation in units.
% − The indentation length in percentage(%) of the parent element's width.
inherit − Its parent element’s property inherits the text-indent property.
initial − The text-indent property is set to default.

Example

In the below example, we have used the style.textIndent property to set the indentation of the first line of text in JavaScript. The button “Set Indentation” is associated with a click event that executes the “setTextIndentation()” function that sets the indentation of the first line of text.


<html>
<body>
   <h2>
      Indenting the first line of text using the <i> style.textIndent property </i> in JavaScript
   </h2>
   <div>
      <button onclick="setTextIndentation()"> Set Indentation </button>
      <div id="root" style="border: 2px solid gray; background-color: aliceblue; padding: 10px; margin: 5px 0px;">
         Welcome to Tutorialspoint. This is a demo paragraph to demonstrate the indentation of the first line of text!
      </div>
      <script>
         
         // 'Set Indentation' button click event handler function
         function setTextIndentation() {
            const root = document.getElementById('root')
            root.style.textIndent = '50px'
         }
      </script>
</body>
</html>

Using the style.setProperty() Method

In JavaScript, the style.setProperty method sets a property of an element, either new or existing. Firstly, the document.getElementById() method is used to access the element and then set the ‘text-indent’ property using the style.setProperty method. In the property name parameter of the style.setProperty method should be ‘text-indent’, and the value and priority will be as per the user’s requirement.

Syntax

document.getElementById('element_id').style.setProperty(property_name, value, priority)

In the above syntax, the document.getElementById() method is used to access the element object of an HTML element that has the id attribute sets as ‘element_id’, and then we use the style.setProperty method on that element object.

Parameters

property_name − The name of the property to be set.
value − The new value of the property.
priority − The priority of the property value (optional).

Example

In the below example, we have used the style.setProperty method to set the indentation of the first line of text with JavaScript. An input field is taken to get the user’s input for the length of the indentation of the text. The button “Set Indentation” is associated with a click event that executes the “setTextIndentation()” function that sets the indentation of the first line of text as per the user’s input.


<html>
<body>
   <h2>
      Indenting the first line of text using the <i> style.setProperty method </i> in JavaScript
   </h2>
   <div>
      <h4> Enter the length of the indentation (in px or %): </h4>
      <input type="text" name="indentation" id="indentation" value="40px">
      <button onclick="setTextIndentation()"> Set Indentation </button>
      <div id="root" style="border: 2px solid gray; background-color: aliceblue; padding: 10px; margin: 5px 0px;">
         Welcome to Tutorialspoint. This is a demo paragraph to demonstrate the indentation of the first line of text. The indentation length will be sets by the input field's value!
      </div>
      <script>
         
         // 'Set Indentation' button click event handler function
         function setTextIndentation() {
            const root = document.getElementById('root')
            
            // user input value for the length of the indentation
            const indentation = document.getElementById('indentation').value
            root.style.setProperty('text-indent', indentation)
         }
      </script>
</body>
</html>

In this tutorial, we learned how to set the indentation of the first line of text with JavaScript. We used two approaches, one with the style.textIndent property and another with the style.setProperty() method. We have also seen two examples where we set a predefined value and a user-input value for the length of the text indentation. Users can use any of these approaches as per their requirements.