HTML - DOM樣式物件 outlineStyle 屬性

HTML DOM 樣式物件 **outlineStyle** 屬性設定或返回元素周圍的輪廓樣式。

語法

設定 outlineStyle 屬性

object.style.outlineStyle= "value| initial | inherit";

獲取 outlineStyle 屬性

object.style.outlineStyle;

屬性值

值	描述
none	預設值，指定無輪廓。
hidden	指定關閉輪廓。
dotted	指定點狀輪廓。
dashed	指定虛線輪廓。
solid	指定實線輪廓。
double	定義雙線輪廓，使用兩條線作為輪廓，寬度與 `outlineWidth` 指定的相同。
groove	指定 3D 凹槽輪廓，其效果取決於 `outline-color` 值。
ridge	指定 3D 凹槽輪廓，其效果取決於 `outline-color` 值。
inset	指定 3D 內嵌輪廓，其效果取決於 `outline-color` 值。
outset	指定 3D 外凸輪廓，其效果取決於 `outline-color` 值。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

返回一個字串，表示元素的輪廓樣式。

HTML DOM 樣式物件“outlineStyle”屬性示例

以下示例設定 div 元素的輪廓樣式。

設定 div 元素的輪廓樣式

以下示例將 div 元素的輪廓樣式設定為 **dashed**、**solid** 和 **dotted**。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outlineStyle Property
    </title>
    <style>
        #outline {
            border: 2px solid yellow;
            outline: 2px #04af2f;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Dashed</button>
    <button onclick="funtwo()">Solid </button>
    <button onclick="funthree()">Dotted</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outlineStyle = "dashed";
        }
        function funtwo() {
            document.getElementById("outline")
                .style.outlineStyle = "solid";
        }
        function funthree() {
            document.getElementById("outline")
                .style.outlineStyle = "dotted";
        }
    </script>
</body>
</html>

將輪廓樣式設定為“double”、“groove”和“ridge”

以下示例將 div 元素的輪廓樣式設定為 **double**、**groove** 和 **ridge**。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outlineStyle Property
    </title>
    <style>
        #outline {
            border: 2px solid yellow;
            outline: 2px #04af2f;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Double</button>
    <button onclick="funtwo()">Groove</button>
    <button onclick="funthree()">Ridge</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outlineStyle = "double";
        }
        function funtwo() {
            document.getElementById("outline")
                .style.outlineStyle = "groove";
        }
        function funthree() {
            document.getElementById("outline")
                .style.outlineStyle = "ridge";
        }
    </script>
</body>
</html>

將輪廓樣式設定為“inset”和“outset”

以下示例將 div 元素的輪廓樣式設定為 **inset** 和 **outset**。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outlineStyle Property
    </title>
    <style>
        #outline {
            border: 2px solid yellow;
            outline: 2px #04af2f;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Inset</button>
    <button onclick="funthree()">Outset</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outlineStyle = "inset";
        }
        function funthree() {
            document.getElementById("outline")
                .style.outlineStyle = "outset";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
outlineStyle	是 1	是 12	是 1.5	是 1.2	是 7

html_dom_style_object_reference.htm

列印頁面