HTML - DOM Style 物件 textDecorationLine 屬性

HTML DOM Style 物件 textDecorationLine 屬性用於指定裝飾線的型別。可以使用空格分隔的文字裝飾線值列表指定多個屬性值。

語法

設定 textDecorationLine 屬性

object.style.textDecorationLine= "none | underline | overline | line-through | blink | initial | inherit";

獲取 textDecorationLine 屬性

object.style.textDecorationLine;

屬性值

值	描述
none	這是預設值，表示普通文字。
underline	指定下劃線文字。
overline	指定文字上方的線條。
line-through	指定穿過文字的線條。
blink	使文字以規律的間隔閃爍，但是此值在許多現代 Web 瀏覽器中不受支援。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

它返回一個字串值，表示元素的文字裝飾線屬性。

HTML DOM Style 物件“textDecorationLine”屬性示例

以下示例將不同的文字裝飾線值設定為 p 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textDecorationLine Property
    </title>
</head>
<body>
    <p>Click to change text decoration.</p>
    <button onclick="fun()">Underline</button>
    <button onclick="funTwo()">Overline</button>
    <button onclick="funThree()">Line through</button>
    <button onclick="funFour()">None</button>
    <div id="decor">
        <p>
            See the effects here.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("decor")
                .style.textDecorationLine = "underline"
        }
        function funTwo() {
            document.getElementById("decor")
                .style.textDecorationLine = "overline"
        }
        function funThree() {
            document.getElementById("decor")
                .style.textDecorationLine = "line-through"
        }  
        function funFour() {
            document.getElementById("decor")
                .style.textDecorationLine = "none"
        }      
    </script>
</body>
</html>

支援的瀏覽器

屬性
textDecorationLine	是 57	是 79	是 36	是 12.1	是 44

html_dom_style_object_reference.htm

列印頁面