Open In App

HTML | DOM Style tabSize Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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>


Output:

  • Before clicking the button:

 

  • After clicking the button:

 

Supported Browsers: The browser supported by DOM Style tabSize Property are listed below:

  • Chrome 21
  • Edge 79
  • Firefox 91
  • Opera 15
  • Safari 7


Last Updated : 05 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads