HTML DOM Style lineHeight property
Style Objects Definition and Usage
lineHeight property sets or returns the distance between rows of text.
grammar
Setting lineHeight properties:
Object.style.lineHeight="normal|number|length|%|inherit"
Back lineHeight properties:
Object.style.lineHeight
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 使用 px、cm 等单位定义行间距。 |
| % | 定义行间距为当前字体尺寸的百分比。 |
| inherit | lineHeight 属性的值从父元素继承。 |
Browser Support
All major browsers support lineHeight property.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Examples
Examples
Change the row height:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Script>
function displayResult () {
. Document.getElementById ( "div1") style.lineHeight = "2";
}
</ Script>
</ Head>
<Body>
<Div id = "div1">
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. This is some text.
</ Div>
<br>
<Button type = "button" onclick = "displayResult ()"> Modify Row Height </ button>
</ Body>
</ Html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Script>
function displayResult () {
. Document.getElementById ( "div1") style.lineHeight = "2";
}
</ Script>
</ Head>
<Body>
<Div id = "div1">
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. This is some text.
</ Div>
<br>
<Button type = "button" onclick = "displayResult ()"> Modify Row Height </ button>
</ Body>
</ Html>
try it"
Style Objects