HTML | DOM Style tabSize Property

Last Updated : 05 Aug, 2022

The Style tabSize property in HTML DOM is used to set or return the length of the space used in place of the tab character.

Syntax:

To get the tabSize property

object.style.tabSize

To set the tabSize property

object.style.tabSize = "number|length|initial|inherit"

Property Values

number: It is used to specify the number of space characters to be used for each tab character. The default value is 8.
length: This is used to specify the length of the tab character. This value is not currently supported by most browsers.
initial: This is used to set the property to its default value.
inherit: This is used to inherit the value from the element's parent.

Example 1: Using "number" property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
      DOM Style tabSize Property
    </title>
</head>
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style tabSize Property
    </b>
    <p>
      The tabSize property specifies 
      the amount of space to be used 
      for the tab character.
    </p>
    <pre id="ts">
     Geeks    For    Geeks
    </pre>
    <button onclick="GFG()">
      Change
    </button>
    <script>
        function GFG() {
            ele = document.getElementById("ts");
            ele.style.tabSize = "16"
        }
    </script>
</body>
</html>

Output:

Before clicking the button:

After clicking the button:

Example 2: Using "initial" property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
      DOM Style tabSize Property
    </title>
    <style>
      #ts {
          tab-size: 16;
       }
    </style>
</head>
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>DOM Style tabSize Property</b>
    <p>
      The tabSize property specifies
      the amount of space to be used 
      for the tab character.
    </p>
    <pre id="ts">
      Geeks        For        Geeks
    </pre>
    <button onclick="GFG()">Change</button>
    <script>
        function GFG() {
            ele = document.getElementById("ts");
            ele.style.tabSize = "initial"
        }
    </script>
</body>
</html>