Javascript Reference - HTML DOM Style lineHeight Property

The lineHeight property sets or gets the distance between text lines.

Browser Support


`lineHeight`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the lineHeight property:

var v = object.style.lineHeight

Set the lineHeight property:

object.style.lineHeight='normal|number|length|%|initial|inherit'

Property Values

Value	Description
normal	Default. Normal line height.
number	multiply a number with font size as line height
length	Set line height in length units
%	Set the line height in percent of the current font size
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	normal
Return Value:	A string representing the distance between text lines
CSS Version	CSS1

Example

The following code shows how to set the line height.


<!DOCTYPE html>
<html>
<body>
<!--from  w  w w. j a v a2 s  .  co  m-->
<div id="myDiv">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.lineHeight = "3";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the line height.


<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="line-height:450%;">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div><!--   w  w w.j  a  va 2  s  . c o m-->
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.lineHeight);
}
</script>

</body>
</html>

The code above is rendered as follows: