如何使用 JavaScript 設定頂部邊框的樣式？

在本教程中，我們將學習如何使用 JavaScript 設定頂部邊框的樣式。要使用 JavaScript 設定頂部邊框的樣式，請使用 borderTopStyle 屬性。使用此屬性設定頂部邊框的樣式。

讓我們簡要討論一下 JavaScript 中可用於實現此目的的屬性。

使用 borderTopStyle 屬性

使用 Style borderTopStyle 屬性，我們可以設定或返回元素頂部邊框的樣式。

語法

以下是使用 JavaScript 中的 borderTopStyle 屬性設定頂部邊框樣式的語法：

object.style.borderTopStyle = value;

在這裡，我們將 object 的頂部邊框樣式設定為“value”。

我們將在下面看到可用的值：

  • none - 不設定邊框。
  • hidden - 與“none”類似。表格元素邊框問題特有。
  • dotted - 設定點狀邊框。
  • dashed - 設定虛線邊框。
  • solid - 設定實線邊框。
  • double - 設定兩條邊框。總寬度等於邊框寬度。
  • groove - 設定 3D 凹槽邊框。效果取決於顏色。
  • ridge - 設定 3D 凸脊邊框。效果取決於顏色。
  • inset - 設定 3D 內嵌邊框。效果取決於顏色。
  • outset - 設定 3D 外凸邊框。效果取決於顏色。
  • initial - 將此屬性設定為預設值。
  • inherit - 從其父元素繼承此屬性。

給定屬性的預設值為 none。返回值是表示頂部邊框樣式的字串。

示例 1

您可以嘗試執行以下程式碼，以瞭解如何使用 JavaScript 設定頂部邊框的樣式。

<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         border: thick solid gray;
         width: 500px;
         height: 300px;
      }
   </style>
</head>
   <body>
   <div id="box">Demo Text</div>
   <br>
   <p> Click the "Change top border style" button to change the style of top border to "dashed".</p>
   <br>
   <button type="button" onclick="display()">Change top border style</button>
   <script>
      function display() {
         document.getElementById("box").style.borderTopStyle = "dashed";
      }
   </script>
</body>
</html>

示例 2

在此程式中，我們正在為多個 div 元素設定不同的頂部邊框樣式。

當用戶按下按鈕時，我們呼叫函式根據上面給出的語法設定頂部邊框樣式。

<html>
<head>
   <style>
      .topBordrEl{
         background-color: #FFFFFF;
         height: 150px;
         width: 140px;
         padding-top: 35px;
         padding-top: 5px;
         border-style: solid;
         border-top-width: 1px;
         border-right-width: 1px;
         border-top-width: 10px;
         border-left-width: 1px;
         border-color: #4B0082;
         text-align: center;
         float: left;
      }
      #topBordrBtnWrap{
         margin-top: 10px;
         float: left;
      }
   </style>
</head>
<body>
   <h3> Set the style of the top border using the <i> borderTopStyle </i>property.</h3>
   <div class = "topBordrEl" id = "topBordrEl1">Top 1</div>
   <div class = "topBordrEl" id = "topBordrEl2">Top 2</div>
   <div class = "topBordrEl" id = "topBordrEl3">Top 3</div>
   <div class = "topBordrEl" id = "topBordrEl4">Top 4</div>
   <br>
   <div id = "topBordrBtnWrap">
      <p> Click on the button to set different styles to the top border. </p>
      <button onclick = "setTopBorderStyle();"> Set </button>
   </div>
   <br>
</body>
   <script>
      function setTopBorderStyle(){
         var topBordrBtnWrap = document.getElementById("topBordrBtnWrap");
         
         // topBordrBtnWrap.style.display = "none";
         var topBordrEl1 = document.getElementById("topBordrEl1");
         var topBordrEl2 = document.getElementById("topBordrEl2");
         var topBordrEl3 = document.getElementById("topBordrEl3");
         var topBordrEl4 = document.getElementById("topBordrEl4");
         topBordrEl1.style.borderTopStyle = "dashed";
         topBordrEl2.style.borderTopStyle = "solid";
         topBordrEl3.style.borderTopStyle = "dotted";
         topBordrEl4.style.borderTopStyle = "double";
         topBordrEl1.innerHTML = "<b> dashed </b>";
         topBordrEl2.innerHTML = "<b> solid </b>";
         topBordrEl3.innerHTML = "<b> dotted </b>";
         topBordrEl4.innerHTML = "<b> double </b>";
      }
   </script>
</html>

示例 3

在此程式中，我們正在將頂部邊框樣式設定為單個 div 元素。我們從使用者那裡獲取頂部邊框樣式。

當用戶按下按鈕時，我們呼叫函式根據上面給出的語法設定頂部邊框樣式。

<html>
<head>
   <style>
      #topBordrUsrEl{
         background-color: #FFFFFF;
         border-style: solid;
         border-width: 5px;
         border-color: #BDB76B;
         text-align: center;
         height: 150px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3> Set the style of the top border using the <i> borderTopStyle </i> property.</h3>
   <div id = "topBordrUsrEl"> Set the top border style here. </div>
   <br>
   <div id = "topBordrUsrBtnWrap">
      <select id = "topBordrUsrSel" size = "1">
         <option/> dotted
         <option/> dashed
         <option/> double
         <option/> groove
         <option/> inset
         <option/> none
         <option/> hidden
         <option/> outset
         <option/> ridge
         <option selected = "selected"/> solid
         <option/> inset
         <option/> outset
      </select>
      <br><br>
      <p> Provide the border-top style and click on the button. </p>
      <button onclick = "setTopBorderStyle();"> Set </button>
   </div>
   <br>
</body>
   <script>
      function setTopBorderStyle(){
         var topBordrUsrSelTag = document.getElementById("topBordrUsrSel");
         var topBordrUsrSelIndx = topBordrUsrSelTag.selectedIndex;
         var topBordrUsrSelStat = topBordrUsrSelTag.options[topBordrUsrSelIndx].text;
         var topBordrUsrBtnWrap = document.getElementById("topBordrUsrBtnWrap");
         
         // topBordrUsrBtnWrap.style.display = "none";
         var topBordrUsrEl = document.getElementById("topBordrUsrEl");
         topBordrUsrEl.style.borderTopStyle = topBordrUsrSelStat;
         topBordrUsrEl.innerHTML="You have set the top border style to <b>"
         + topBordrUsrEl.style.borderTopStyle + "</b>";
      }
   </script>
</html>

在本教程中，我們介紹了 JavaScript 中的 borderTopStyle 屬性。borderTopStyle 屬性是 JavaScript 中內建的選項，用於設定頂部邊框的樣式，並且非常易於編碼。

更新於： 2022年10月12日

257 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.