样式lineHeight属性用于设置或返回文本中线之间的距离。它是一个字符串,代表文本中行之间的距离。
- 用法:
- 要返回line-height。
object.style.lineHeight
- 设置line-height。
object.style.lineHeight = "normal|number|length|%|initial| inherit"
属性值:
- normal:用于定义正常高度。
- number:它用于定义一个数字,该数字将与当前字体大小相乘以设置行高。
- length:它用于以长度单位定义线高。
- %:用于定义以当前字体大小的百分比表示的行高。
- initial:它用于将此属性设置为其默认值。
- inherit:它用于从其父元素继承此属性。
以下示例程序旨在说明样式lineHeight属性:
例:设置<div>元素的行高。
<!DOCTYPE html>
<html>
<head>
<title> Style lineHeight property in HTML</title>
<style>
#samplediv {
border:1px solid green;
}
h1 {
color:green;
}
h2 {
font-family:Impact;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2> Style lineHeight property </h2>
<br>
<div id="MyDiv">
GeeksforGeeks offers the following courses:
<ul>
<li> Fork Python </li>
<li> Fork CPP </li>
<li> Fork Java </li>
<li> Sudo Placement </li>
</ul>
</div>
<br>
<p>Double click the button</p>
<button type="button" ondblclick="lineheight()">
Adjust Line Height
</button>
<script>
function lineheight() {
// Set lineHeight.
document.getElementById(
"MyDiv").style.lineHeight =
"2";
}
</script>
</body>
</html>
输出:
- 在单击按钮之前:
- 单击按钮后:
支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox
- Opera
- 苹果Safari
相关用法
- HTML Style right用法及代码示例
- HTML Style top用法及代码示例
- HTML Style fontStyle用法及代码示例
- HTML Style textDecorationColor用法及代码示例
- HTML Style animationTimingFunction用法及代码示例
- HTML Style animationFillMode用法及代码示例
- HTML Style wordSpacing用法及代码示例
- HTML Style visibility用法及代码示例
- HTML Style pageBreakBefore用法及代码示例
- HTML Style paddingRight用法及代码示例
- HTML Style paddingLeft用法及代码示例
- HTML Style paddingBottom用法及代码示例
- HTML Style width用法及代码示例
- HTML Style paddingTop用法及代码示例
- HTML Style pageBreakInside用法及代码示例
注:本文由纯净天空筛选整理自Shubrodeep Banerjee大神的英文原创作品 HTML | DOM Style lineHeight Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。