Skip to content
Related Articles

Related Articles

HTML | DOM Style tabSize Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • 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>

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!