如何使用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

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.