Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML | DOM Style tabSize Property

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 05 Aug, 2022
Improve Article
Save Article

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
Related Articles

Start Your Coding Journey Now!