Skip to content
Related Articles

Related Articles

HTML | DOM Style tabSize Property
  • Difficulty Level : Basic
  • Last Updated : 02 Aug, 2019

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.




<!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.




<!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
  • Firefox -MozTabSize-
  • Opera 15.0
  • Safari 6.1
My Personal Notes arrow_drop_up
Recommended Articles
Page :