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

打印页面