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

打印页面