The tab-size CSS property determines the tab size used to render preserved tab characters (U+0009).
object.style.tabSize = "value"; <'tab-size'> = <number> | <length> <number> An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<length> Specifies the length using a number followed by a unit of measurement.
<!doctype html>
<html>
<head>
<style>
p
{
tab-size: 100px;
white-space: pre;
}
pre
{
tab-size: 100px;
}
</style>
</head>
<body>
<p>	length</p>
<pre>	length</pre>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
white-space: pre;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(value)" value="4">number</button>
<button onmouseover="myfunction(value)" value="100px">length</button>
<p>	tab-size</p>
<pre>	tab-size</pre>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p, pre");
for(let myelement of myelements)
{
myelement.style.tabSize = myparameter;
}
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
white-space: pre;
}
</style>
</head>
<body>
<button>initial</button>
<button value="4">number</button>
<button value="100px">length</button>
<p>	tab-size</p>
<pre>	tab-size</pre>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p, pre");
for(let myelement of myelements)
{
myelement.style.tabSize = myparameter;
}
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>