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

列印頁面