The Style letterSpacing property in HTML DOM is used to set the space between the characters. This property allows to set the required space between characters and also used to returns the space between characters.
Syntax:
- It returns the letterSpacing property.
object.style.letterSpacing
- It used to set the letterSpacing property.
object.style.letterSpacing = "normal|length|initial|inherit"
Property Values:
- normal: The normal spacing for the current font i.e no extra space between characters. This is the default value.
- length: This mode specifies extra inter-character space in addition to the default space between the characters. Negative values are also allowed.
- initial: It sets the letterSpacing property to its default value.
- inherit: This property is inherited from its parent element.
Return Value: It returns a string that represents a space between the characters.
Example 1:
html
<!DOCTYPE html> <html>
<head>
<title>
DOM Style letterSpacing Property
</title>
</head>
<body>
<center>
<h1 style = "color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style letterSpacing Property </h2>
<p id = "GFG">
A computer science portal for geeks
</p>
<button type = "button" onclick = "geeks()">
Submit
</button>
<script>
function geeks() {
document.getElementById("GFG").style.letterSpacing
= "8px";
}
</script>
</center>
</body>
</html>
|
Output:
- Before Click on the button:
- After Click on the button:
Example 2:
html
<!DOCTYPE html> <html>
<head>
<title>
DOM Style letterSpacing Property
</title>
</head>
<body>
<center>
<h1 style = "color:green;">
GeeksForGeeks
</h1>
<h2>
DOM Style letterSpacing Property
</h2>
<p id = "GFG">
A computer science portal for geeks
</p>
<button type = "button" onclick = "geeks()">
Submit
</button>
<script>
function geeks() {
document.getElementById("GFG").style.letterSpacing
= "-1.5px";
}
</script>
</center>
</body>
</html>
|
Output:
- Before Click on the button:
- After Click on the button:
Supported Browsers: The browser supported by DOM Style letterSpacing property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 3.5
- Apple Safari 1