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

打印页面