HTML DOM 样式 borderStyle 属性

htmlweb developmentfront end technology更新于 2024/3/10 19:24:17

HTML DOM borderStyle 属性用于获取或设置元素边框样式属性的简写。它以以下方式接受 1 到 4 个值 −

如果同时提供 4 个值，则按顺时针方向分配边框样式。
如果只提供 1 个值，则相同的样式将应用于所有 4 个边框。
如果提供 2 个值，则将 top 和 bottom 设置为第一个值，将 left 和 right 设置为第二个值。

以下是语法 −

设置 borderStyle 属性:

object.style.borderLeftStyle = 值

以上属性的解释如下 −

值	描述
None	这是指定无边框的默认值。
Hidden	这与"无"相同，但仍会占用边框空间。它基本上是透明的，但仍然在那里。
Dotted	这定义了一个点线边框。
Dashed	这定义了一个虚线边框。
Solid	这定义了一个实线边框。
Double	这定义了一个双线边框
Groove	这定义了一个三维凹槽边框，与脊线相反。
Ridge	这定义了一个3D 脊状边框，与凹槽相反
Inset	这定义了一个 3D 内嵌边框，其效果看起来像是嵌入的。它产生的效果与外凸相反。
Outset	这定义了一个 3D 内嵌边框，其效果看起来像是浮雕的。它产生与 inset 相反的效果。
Initial	用于将此属性设置为初始值。
Inherit	用于继承父级属性值

让我们看一个 borderStyle 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      width:300px;
      height:100px;
      border: 8px solid dodgerblue;
      border-style: groove;
   }
</style>
<script>
   function changeBorderStyle(){
      document.getElementById("DIV1").style.borderStyle="dashed";
      document.getElementById("Sample").innerHTML="The border style is now changed to dashed";
   }
</script>
</head>
<body>
   <div id="DIV1">SOME SAMPLE TEXT</div>
   <p>Change the above div border style by clicking the below button</p>
   <button onclick="changeBorderStyle()">Change Border Style</button>
   <p id="Sample"></p>
</body>
</html>