HTML - DOM樣式物件borderWidth屬性

HTML DOM 樣式物件**borderWidth**屬性設定或返回元素的邊框寬度。

它可以接受一個到四個值，使用方法如下：

**一個值：**對於一個值，所有四個邊框的寬度相同。例如：h1 {border-width: 4px}
**兩個值：**對於兩個值，頂部和底部的邊框寬度相同，左側和右側邊框寬度相同。例如：h1 {border-width: 4px thin}
**三個值：**對於三個值，頂部和底部的邊框寬度不同，左側和右側邊框寬度相同。例如：h1 {border-width: 4px thin medium}
**四個值：**對於四個值，所有邊框寬度都不同。例如：h1 {border-width: 4px thin medium thick}

語法

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

設定 borderWidth 屬性

object.style.borderWidth= "thin | medium | thick | length | initial | inherit";

獲取 borderWidth 屬性

object.style.borderWidth;

屬性值

值	描述
thin	指定細邊框。
medium	預設值，指定中等邊框。
thick	指定粗邊框。
length	以 CSS 測量單位（如 px）指定邊框寬度。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

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

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

以下示例說明了不同的邊框寬度值。

更改邊框寬度

在以下示例中，我們將邊框寬度從 2px 更改為 thick。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderWidth Property
    </title>
    <style>
        #border {
            border: 2px solid;
        }
    </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.borderWidth = "thick";
        }
    </script>
</body>
</html>

設定多個邊框寬度

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

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderWidth Property
    </Title>
    <style>
        h1 {
            border : 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.borderWidth = "4px thin";
        }
        function funthree() {
            document.getElementById("border")
            .style.borderWidth = "4px thin 8px";
        }
        function funfour() {
            document.getElementById("border")
            .style.borderWidth = "4px thin 8px thick";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
borderWidth	是 1	是 12	是 1	是 1	是 3.5

html_dom_style_object_reference.htm

列印頁面