HTML DOM 样式 borderRightStyle 属性

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

HTML DOM borderRightStyle 属性用于设置或返回元素的右边框样式。

以下是语法 −

设置 borderRightStyle 属性 −

object.style.borderRightStyle = 值

以上属性的解释如下 −

值	描述
none	这是默认值，表示无边框。
hidden	这与"none"相同，但仍会占用边框空间。它基本上是透明的，但仍然在那里。
dotted	这定义了一个点状边框。
dashed	这定义了一个虚线边框。
solid	这定义了一个实线边框。
double	这定义了一个双边框。 groove
groove	这定义了一个三维凹槽边框，与脊状边框相反。
ridge	这定义了一个三维脊状边框，与凹槽边框相反
inset	这定义了一个三维插入边框，效果看起来像是嵌入的。它产生与 outset 相反的效果。
outset	这定义了一个 3D 内嵌边框，其效果看起来像是浮雕。它产生与 inset 相反的效果。
initial	用于将此属性设置为初始值。
inherit	用于继承父级属性值

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

示例

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