object.style.lineHeight = "value"; <'line-height'> = normal | <number> | <length> | <percentage> | inherit normal Tells user agents to set the used value to a reasonable value based on the font of the element.
<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.
<percentage> Specifies the percentage using a number followed by a percent sign (%).
inherit Specifies the same value as the parent.
<!doctype html>
<html>
<head>
<style>
p
{
background-color: yellow;
line-height: normal;
}
</style>
</head>
<body>
<p>normal</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: yellow;
line-height: 2;
}
</style>
</head>
<body>
<p>number</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: yellow;
line-height: 200%;
}
</style>
</head>
<body>
<p>percentage</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: yellow;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button><br>
<button onmouseover="myfunction(value)" value="1em">em</button>
<button onmouseover="myfunction(value)" value="2.235ex">ex</button>
<button onmouseover="myfunction(value)" value="0.1667in">in</button>
<button onmouseover="myfunction(value)" value="0.423cm">cm</button>
<button onmouseover="myfunction(value)" value="4.23mm">mm</button>
<button onmouseover="myfunction(value)" value="1pc">pc</button>
<button onmouseover="myfunction(value)" value="12pt">pt</button>
<button onmouseover="myfunction(value)" value="16px">px</button><br>
<button onmouseover="myfunction(innerHTML)">normal</button>
<button onmouseover="myfunction(value)" value="2">number</button>
<button onmouseover="myfunction(value)" value="200%">percentage</button>
<p>line-height</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.lineHeight = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: yellow;
}
</style>
</head>
<body>
<button>initial</button><br>
<button value="1em">em</button>
<button value="2.235ex">ex</button>
<button value="0.1667in">in</button>
<button value="0.423cm">cm</button>
<button value="4.23mm">mm</button>
<button value="1pc">pc</button>
<button value="12pt">pt</button>
<button value="16px">px</button><br>
<button>normal</button>
<button value="2">number</button>
<button value="200%">percentage</button>
<p>line-height</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.lineHeight = 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>