HTML - DOM样式对象lineHeight属性

HTML DOM 样式对象**lineHeight**属性设置或返回文本中两行之间的距离。

语法

设置 lineHeight 属性

object.style.lineHeight= "normal | number | length | percentage | initial | inherit";

获取 lineHeight 属性

object.style.lineHeight;

属性值

值	描述
normal	这是默认值，指定正常的行高。
数字	指定一个数字，该数字将乘以当前字体大小以设置行高。
长度	指定以长度单位表示的行高。
百分比	指定相对于当前字体大小的百分比的行高。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示文本中两行之间的距离。

HTML DOM 样式对象“lineHeight”属性示例

在下面的示例中，我们在 div 元素上使用了**长度**、**百分比**和**数字**值来更改行高。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object lineHeight Property
    </title>
</head>
<body>
    <h3>
        Click to set line height.
    </h3>
    <button onclick="fun()">Set Line Height</button>
    <button onclick="funTwo()">Set Percentage</button>
    <button onclick="funThree()">Set Number</button>
    <br>
    <br>
    <div id="height">
        <p>
            CSS is the acronym for "Cascading Style Sheet".
        </p>
        <p>
            It's a style sheet language used for describing
        </p>
        <p>
            the presentation of a document written in a
        </p>
        <p>
            markup language like HTML. CSS helps the web
        </p>
        <p>
            developers to control the layout and other
        </p>
        <p>visual aspects of the web pages.</p>
    </div>
    <script>
        function fun() {
            document.getElementById("height")
                .style.lineHeight = "50px";
        }
        function funTwo() {
            document.getElementById("height")
                .style.lineHeight = "150%";
        }
        function funThree() {
            document.getElementById("height")
                .style.lineHeight = "3";
        }
    </script>
</body>
</html>

支持的浏览器

属性
lineHeight	是 1	是 12	是 1	是 1	是 7

html_dom_style_object_reference.htm

打印页面