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 21
- Edge 79
- Firefox 91
- Opera 15
- Safari 7
