HTML DOM 样式 borderLeftStyle 属性

htmldomweb developmentfront end technology更新于 2024/3/9 20:28:17

borderLeftStyle 属性用于设置或返回元素的左边框样式。

以下是语法 −

设置 borderLeftStyle 属性 −

object.style.borderLeftStyle = 值

以上属性的解释如下 −

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

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

示例

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