HTML - DOM Style 物件 borderStyle 屬性

HTML DOM Style 物件的 **borderStyle** 屬性用於設定或返回元素的邊框樣式。

它可以接受一個到四個值，這些值可以如下實現

**一個值：**對於一個值，所有四個邊框的邊框樣式將相同。例如：h1 {border-style: solid}
**兩個值：**對於兩個值，頂部和底部的邊框樣式將相同，左側和右側邊框將具有相同的樣式。例如：h1 {border-style: solid dotted}
**三個值：**對於三個值，頂部和底部的邊框將具有不同的邊框樣式，而左側和右側邊框將具有相同的樣式。例如：h1 {border-style: solid dotted dashed}
**四個值：**對於四個值，所有邊框將具有不同的樣式。例如：h1 {border-style: solid dotted dashed double}

語法

以下是獲取或設定 borderStyle 屬性的語法。

設定 borderStyle 屬性

object.style.borderStyle= "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit";

獲取 borderStyle 屬性

object.style.borderStyle;

屬性值

值	描述
none	這是預設值，表示沒有邊框。
hidden	它與 'none' 相同，但它建立了一個透明或不可見的邊框，並佔用邊框寬度指定的區域。這在表格元素的邊框衝突解決中很有幫助。
dotted	它指定點狀邊框。
dashed	它指定虛線邊框。
solid	它指定實線邊框。
double	它定義雙線邊框，其中使用兩條線作為邊框，其寬度與 borderWidth 指定的相同。
groove	它指定 3D 凹槽邊框，其效果取決於 border-color 值。
ridge	它指定 3D 凹槽邊框，其效果取決於 border-color 值。
inset	它指定 3D 內嵌邊框，其效果取決於 border-color 值。
outset	它指定 3D 外凸邊框，其效果取決於 border-color 值。
initial	它用於將此屬性設定為其預設值。
inherit	它用於繼承其父元素的屬性。

返回值

它返回一個字串值，表示元素的邊框樣式。

HTML DOM Style 物件 'borderStyle' 屬性的示例

以下示例說明了不同的邊框樣式值。

更改邊框樣式

在以下示例中，我們已將邊框樣式從點狀更改為實線。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderStyle Property
    </title>
    <style>
        #border {
            border: 2px dotted;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="fun()">Change Border</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border").style.borderStyle = "solid";
        }
    </script>
</body>
</html>

設定多個邊框樣式

在以下示例中，我們使用了兩個值、三個值、四個值來為不同側面設定不同的邊框樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderStyle Property
    </Title>
    <style>
        h1 {
            border : 2px solid black;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="funtwo()">Two Border</button>
    <button onclick="funthree()">Three Border</button>
    <button onclick="funfour()">Four Border</button>
    <h1 id="border">
        Welcome to Tutorials Point...
    </h1>
    <script>
        function funtwo() {
            document.getElementById("border")
            .style.borderStyle = "solid dotted";
        }
        function funthree() {
            document.getElementById("border")
            .style.borderStyle = "solid dotted dashed";
        }
        function funfour() {
            document.getElementById("border")
            .style.borderStyle = "solid dotted dashed double";
        }
    </script>
</body>
</html>

將邊框樣式設定為 'groove' 和 'ridge'

以下示例將邊框樣式設定為 groove 和 ridge。

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderStyle Property
    </Title>
    <style>
        h1 {
            border : 2px solid aqua;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="groove()">Groove</button>
    <button onclick="ridge()">Ridge</button>
    <h1 id="border">
        Welcome to Tutorials Point...
    </h1>
    <script>
        function groove() {
            document.getElementById("border")
            .style.borderStyle = "groove";
        }
        function ridge() {
            document.getElementById("border")
            .style.borderStyle = "ridge";
        }
    </script>
</body>
</html>

將邊框樣式設定為 'inset' 和 'outset'

以下示例將邊框樣式設定為 inset 和 outset。

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderStyle Property
    </Title>
    <style>
        h1 {
            border : 2px solid aqua;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="inset()">Inset</button>
    <button onclick="outset()">Outset</button>
    <h1 id="border">
        Welcome to Tutorials Point...
    </h1>
    <script>
        function inset() {
            document.getElementById("border")
            .style.borderStyle = "inset";
        }
        function outset() {
            document.getElementById("border")
            .style.borderStyle = "outset";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
borderStyle	是 1	是 12	是 1	是 1	是 3.5

html_dom_style_object_reference.htm

列印頁面