HTML DOM 样式 borderWidth 属性

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

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

如果同时指定 4 个值，则按顺时针方向分配 border-width。
如果只指定一个值，则所有 4 个边框将应用相同的宽度。
如果指定两个值，则将 top 和 bottom 设置为第一个值，将 left 和 right 设置为第二个值。
以下是语法 −

设置 borderWidth 属性:

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"

属性值解释如下 −

值	描述
thin	用于指定左边框颜色。默认颜色设置为黑色
medium	指定中等边框，这是默认值。
thick	指定细边框。
length	用于以长度单位指定边框宽度。
initial	将此属性设置为初始值。
inherit	继承父级属性值

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

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      height: 100px;
      width: 200px;
      border: 10px groove orange;
      padding: 10px;
      border-width:30px;
   }
</style>
<script>
   function changeBorderWidth(){
      document.getElementById("DIV1").style.borderWidth="5px";
      document.getElementById("Sample").innerHTML="The border width is now decreased";
   }
</script>
</head>
<body>
   <div id="DIV1">SOME SAMPLE TEXT</div>
   <p>Change the above div border width by clicking the below button</p>
   <button onclick="changeBorderWidth()">Change Border Width</button>
   <p id="Sample"></p>
</body>
</html>