如何使用JavaScript設定元素邊框樣式？

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

讓我們詳細討論一下可用的borderStyle屬性。

使用borderStyle屬性

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

語法

以下是使用borderStyle屬性使用JavaScript設定元素邊框樣式的語法：

object.style.borderStyle = style;

此語法允許我們將所需的邊框樣式設定為元素的樣式。我們將在下面看到可用的style值。

引數

  • 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>
      #newDiv {
         height: 150px;
         width: 450px;
         border: 2px solid #000000;
      }
   </style>

   <body>
      <div id="newDiv">
         Demo Content!
      </div>
      <br>
      <button type="button" onclick="display()">Change border style</button>
      <script>
         function display() {
            document.getElementById("newDiv").style.borderStyle = "dashed";
         }
      </script>
   </body>
</html>

示例2

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

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

<html>
<head>
   <style>
      .bordrStylEl {
         background-color: #FFFFFF;
         height: 50px;
         width: 60px;
         padding-top: 35px;
         padding-top: 5px;
         border: 5px solid blue;
         text-align: center;
         float: left;
         margin-right: 5px;
      }

      #bordrStylBtnWrap {
         margin-top: 10px;
         float: left;
      }
   </style>
</head>
<body>
   <h3> Setting the style of an element's border using the<i> borderStyle </i> property.
   </h3>
   <div class="bordrStylEl" id="bordrStylEl1"> Border 1 </div>
   <div class="bordrStylEl" id="bordrStylEl2"> Border 2 </div>
   <div class="bordrStylEl" id="bordrStylEl3"> Border 3 </div>
   <div class="bordrStylEl" id="bordrStylEl4"> Border 4 </div>
   <br>
   <div id="bordrStylBtnWrap"> <br />
      <p> Click the button to set different styles to an element's border. </p>
      <button onclick="setBorderStyle();"> Set </button>
   </div>
   <br>
</body>
<script>
   function setBorderStyle() {
      var bordrStylBtnWrap = document.getElementById("bordrStylBtnWrap");
      var bordrStylEl1 = document.getElementById("bordrStylEl1");
      var bordrStylEl2 = document.getElementById("bordrStylEl2");
      var bordrStylEl3 = document.getElementById("bordrStylEl3");
      var bordrStylEl4 = document.getElementById("bordrStylEl4");
      bordrStylEl1.style.borderStyle = "dashed";
      bordrStylEl2.style.borderStyle = "solid";
      bordrStylEl3.style.borderStyle = "dotted";
      bordrStylEl4.style.borderStyle = "double";
      bordrStylEl1.innerHTML = "<b> dashed </b>";
      bordrStylEl2.innerHTML = "<b> solid </b>";
      bordrStylEl3.innerHTML = "<b> dotted </b>";
      bordrStylEl4.innerHTML = "<b> double </b>";
   }
</script>
</html>

示例3

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

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

<html>
<head>
   <style>
      #bordrStylUsrEl {
         background-color: #FFFFFF;
         border: 5px solid purple;
         text-align: center;
      }
   </style>
</head>
<body>
   <h3>Setting the style of an element's border using the <i> borderStyle</i> property.
   </h3>
   <div id="bordrStylUsrEl"> Set the border style here. </div>
   <br>
   <div id="bordrStylUsrBtnWrap">
      <select id="bordrStylUsrSel" size="10">
         <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 style and click on the button. </p>
      <button onclick="setBorderStyle();"> Set </button>
   </div>
   <br>
</body>
   <script>
      function setBorderStyle() {
         var bordrStylUsrSelTag = document.getElementById("bordrStylUsrSel");
         var bordrStylUsrSelIndx = bordrStylUsrSelTag.selectedIndex;
         var bordrStylUsrSelStat = bordrStylUsrSelTag.options[bordrStylUsrSelIndx].text;
         var bordrStylUsrBtnWrap = document.getElementById("bordrStylUsrBtnWrap");
         var bordrStylUsrEl = document.getElementById("bordrStylUsrEl");
         bordrStylUsrEl.style.borderStyle = bordrStylUsrSelStat;
         bordrStylUsrEl.innerHTML =
            "You have set the element’s border style to <b>" + bordrStylUsrEl.style.borderStyle + "</b>";
      }
   </script>
</html>

在本教程中，我們學習了JavaScript中的borderStyle屬性。borderStyle屬性是JavaScript中內建的選項，用於設定元素邊框的樣式，並且非常易於編碼。

更新於：2022年11月9日

1000+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

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