Javascript Reference - HTML DOM Style letterSpacing Property

The letterSpacing property sets or gets the space between characters.

Browser Support


`letterSpacing`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the letterSpacing property:

var v = object.style.letterSpacing

Set the letterSpacing property:

object.style.letterSpacing='normal|length|initial|inherit;

Property Values

Value	Description
normal	Default. Normal space.
length	Space in length units. Negative values are allowed
initial	Sets to default value.
inherit	Inherits from parent element.

Technical Details

Default Value:	normal
Return Value:	A string representing the space between characters
CSS Version	CSS1

Example

The following code shows how to set the space between characters to 15 pixels.


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is a test.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from   w  ww.j  ava  2 s . c om-->
    document.getElementById("myP").style.letterSpacing = "15px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to use negative values in letter space setting.


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   ww w.  j  a v  a  2 s.  com-->
    document.getElementById("myP").style.letterSpacing = "-2px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the letter spacing.


<!DOCTYPE html>
<html>
<body>
<p id="myP" style="letter-spacing:10px;">This is an example.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!-- www  . j a v a  2 s  .  com-->
    console.log(document.getElementById("myP").style.letterSpacing);
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to set letterSpacing property and the wordSpacing property.


<!DOCTYPE html>
<html>
<body>
<p id="myP1">This is an example paragraph.</p>
<p id="myP2">This is an example paragraph.</p>
<button type="button" onclick="changeLetters()">letter spacing</button>
<button type="button" onclick="changeWords()">word spacing</button>
<script>
function changeLetters() {<!-- w  w w.j a v  a 2s . co  m-->
    document.getElementById("myP1").style.letterSpacing = "15px";
}

function changeWords() {
    document.getElementById("myP2").style.wordSpacing = "15px";
}
</script>

</body>
</html>

The code above is rendered as follows: