如何使用JavaScript设置底部边框的宽度？

在本教程中，我们将学习如何使用JavaScript设置底部边框的宽度。要设置底部边框的宽度，我们可以使用JavaScript中的`borderBottomWidth`属性。它允许您更改宽度。让我们简要讨论一下我们的主题。

使用`borderBottomWidth`属性

使用此属性，我们可以设置或返回元素底部边框的宽度。

宽度是一个浮点数，带有相对单位指示符（cm、mm、in、pt或pc）或绝对单位指示符（em、ex或px）。

语法

以下是使用JavaScript中的`Style borderBottomWidth`属性设置底部边框宽度的语法：

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

此语法允许我们将所需的底部边框宽度设置为元素的样式。

参数

  • thin − 设置细边框。
  • medium − 设置中等边框。
  • thick − 设置粗边框。
  • length − 边框宽度（长度单位）。
  • initial − 将此属性设置为其默认值。
  • inherit − 从其父元素继承此属性。

示例

您可以尝试运行以下代码，学习如何设置底部边框的宽度。

<!DOCTYPE html>
<html>
<body>
   <div id="box">Demo Text</div>
   <br>
   <button onclick="display()">Click to set width of bottom
   border</button>
   <script>
      function display() {
         document.getElementById("box").style.borderBottomStyle="dashed";
         document.getElementById("box").style.borderBottomWidth="5px";
      }
   </script>
</body>
</html>

示例2

在这个程序中，我们正在将底部边框宽度设置为div元素。我们从用户那里获取底部边框宽度。

当用户点击按钮时，我们调用函数来根据上面给出的语法设置底部边框宽度。

<html>
<head>
<style>
   #btmBrdrWdthUsrEl{
      background-color: #FFFFFF;
      height: 50px;
      padding-top: 35px;
      padding-left: 5px;
      border: thin solid #000000;
   }
</style>
</head>
<body>
   <h3> Set the width of the bottom border using the
   <i>borderBottomWidth </i> property.
   </h3>
   <div id="btmBrdrWdthUsrEl"> Set the bottom border width here.
   </div>
   <br>
   <div id="btmBrdrWdthUsrBtnWrap">
      <select id="btmBrdrWdthUsrSel">
         <option/> thick
         <option/> medium
         <option selected = "selected"/> thin
         <option/> initial
         <option/> inherit
         <option/> 9px
         <option/> 8ex
         <option/> 7em
         <option/> 6cm
         <option/> 5mm
         <option/> 4in
         <option/> 3pt
         <option/> 2pc
      </select>
      <br><br>
      <p> Provide the border-bottom width and click on the button. </p>
      <button onclick="setBottomBorderWidth();"> Set </button>
   </div>
   <br>
</body>
<script>
   function setBottomBorderWidth(){
      var btmBrdrWdthUsrSelTag=document.getElementById("btmBrdrWdthUsrSel");
      var btmBrdrWdthUsrSelIndx=btmBrdrWdthUsrSelTag.selectedIndex;
      var btmBrdrWdthUsrSelStat=btmBrdrWdthUsrSelTag.options[btmBrdrWdthUsrSelIndx].text;
      var btmBrdrWdthUsrBtnWrap=document.getElementById("btmBrdrWdthUsrBtnWrap");
      // btmBrdrWdthUsrBtnWrap.style.display="none";
      var btmBrdrWdthUsrEl=document.getElementById("btmBrdrWdthUsrEl");
      btmBrdrWdthUsrEl.style.borderBottomWidth=btmBrdrWdthUsrSelStat;
   }
</script>
</html>

示例3

此程序已将底部边框宽度设置为div元素。当用户点击按钮时，我们将根据获取底部边框宽度的语法显示底部边框宽度。

<html>
<head>
<style>
   #btmBrdrWdthGetEl{
      background-color: #9370DB;
      height: 100px;
      padding-top:70px;
   }
</style>
</head>
<body>
   <h3> Getting the width of the bottom border using the<i>
      borderBottomWidth </i>property.
   </h3>
   <div id="btmBrdrWdthGetEl" style="border: medium dashed #000000;">
   Get the bottom border width of this element. </div>
   <br>
   <div id="btmBrdrWdthGetBtnWrap">
      <p> Click on the button to get the width. </p>
      <button onclick="getBottomBorderWidth();"> Get </button>
   </div>
   <br>
   <p id="btmBrdrWdthGetOp"> </p>
</body>
<script>
   function getBottomBorderWidth(){
      var btmBrdrWdthGetBtnWrap=document.getElementById("btmBrdrWdthGetBtnWrap");
      var btmBrdrWdthGetEl=document.getElementById("btmBrdrWdthGetEl");
      var btmBrdrWdthGetOp=document.getElementById("btmBrdrWdthGetOp");
      // btmBrdrWdthGetBtnWrap.style.display="none";
      btmBrdrWdthGetOp.innerHTML="The bottom border width is = <b>"
      + btmBrdrWdthGetEl.style.borderBottomWidth + "</b>";
   }
</script>
</html>

在本教程中，我们学习了JavaScript中的`borderBottomWidth`属性。要设置底部边框的宽度，此属性是JavaScript中的内置选项，非常易于编码。

更新于：2022年11月22日

浏览量：300

开启您的职业生涯

完成课程获得认证

开始学习
广告