HTML - DOM樣式物件borderTopStyle屬性

HTML DOM樣式物件**borderTopStyle**屬性設定或返回元素的頂部邊框樣式。

語法

設定borderTopStyle屬性

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

獲取borderTopStyle屬性

object.style.borderTopStyle;

屬性值

值	描述
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樣式物件'borderTopStyle'屬性示例

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

更改頂部邊框樣式

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

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderTopStyle 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.borderTopStyle = "solid";
        }
    </script>
</body>
</html>

將頂部邊框樣式設定為'dotted'、'dashed'和'double'

以下示例將頂部邊框樣式設定為點狀、虛線和雙線。

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

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

以下示例將頂部邊框樣式設定為凹槽和脊狀。

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderTopStyle 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.borderTopStyle = "groove";
        }
        function ridge() {
            document.getElementById("border")
                .style.borderTopStyle = "ridge";
        }
    </script>
</body>
</html>

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

以下示例將頂部邊框樣式設定為內嵌和凸出。

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderTopStyle 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.borderTopStyle = "inset";
        }
        function outset() {
            document.getElementById("border")
                .style.borderTopStyle = "outset";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
borderTopStyle	是 1	是 12	是 1	是 1	是 9.2

html_dom_style_object_reference.htm

列印頁面