如何使用 JavaScript 設定右側邊框的樣式？

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

我們可以從任何一側或所有側為元素應用邊框。我們可以自定義任何一側的邊框。邊框的每個邊緣都有一個特定屬性，只能用於該邊緣。我們可以提供三個引數（如樣式、顏色和寬度）來建立邊框。CSS 用於執行此類任務。但是，我們可以透過使用 JavaScript DOM 來實現。

邊框有很多型別。有些看起來像直線，有些像波浪線。我們可以使用 JavaScript 在執行時輕鬆更改邊框任何邊緣的樣式。

因此，讓我們看看如何使用 borderRightStyle 屬性使用 JavaScript 設定右側邊框的樣式。

使用 borderRightStyle 屬性

我們可以為邊框使用很多樣式。它可以吸引使用者的注意力並增強網頁的外觀。我們可以為邊框的不同邊緣設定不同的樣式。我們將設定邊框右側邊緣的樣式。borderRightStyle 是設定右側邊框樣式的屬性。

語法

以下是使用 borderRightStyle 屬性設定右側邊框樣式的語法：

elem.style.borderRightStyle = value

在這裡，我們設定了 elem 的右側邊框的樣式。我們將 borderRightStyle 設定為 value。

屬性值如下：

  • none - 設定無邊框（預設值）或刪除邊框。
  • hidden - 邊框存在但隱藏。
  • dotted - 以虛線作為邊框。
  • dashed - 以虛線作為邊框。
  • solid - 普通實線
  • double - 以雙線作為邊框
  • groove - 3D 凹槽邊框。
  • ridge - 3D 脊狀邊框
  • inset - 3D 內嵌邊框
  • outset - 3D 外凸邊框
  • initial - 預設值。
  • inherit - 從父元素繼承

示例 1

在本例中，我們建立了一個帶有實線邊框的 div。單擊按鈕後，我們執行一個函式並設定邊框的樣式。我們使用 borderRightStyle 屬性來設定右側邊框的樣式。雙擊按鈕後，我們的邊框將恢復正常。

<html>
<head>
   <style>
      #container{
         width: 70%;
         height: 15%;
         border: 5px solid red;
      }
   </style>
</head>
<body>
   <h3> Use <i> borderRightStyle </i> to set a style of the right border </h3>
   <div id = "container">
      Apply borders here
   </div>
   <br />
   <button id = "btn"> Apply </button>
   <script>
      var btn = document.getElementById("btn");
      var div = document.getElementById("container");
      btn.addEventListener("click", execute);
      function execute(){
         if(div.style.borderRightStyle != "dotted"){
            div.style.borderRightStyle = "dotted";
         }
         else{
            div.style.borderRightStyle = "solid";
         }
      }
   </script>
</body>
</html>

在上面的示例中，使用者可以看到我們使用了 borderRightStyle 屬性來設定右側邊框樣式。

示例 2

在下面的示例中，我們從使用者那裡獲取數字輸入。我們在按鈕單擊時建立幾個正方形並將其追加到 div 中。我們在每個正方形上應用了實線樣式的邊框。我們使用 borderRightStyle 屬性來設定右側邊框的樣式，併為其應用了點狀樣式。

<html>
<body>
   <h3> Use <i> borderRightStyle </i> to set a style of the right border </h3>
   <label for = "input_num"> No. of Elements: </label>
   <input type = "number" id = "input_num" value = "0" name = "value"/>
   <br /><br />
   <button id = "btn"> Create Element </button>
   <div id = "div"></div>
   <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", execute);
      function execute(){
         var element_div = document.getElementById("div")
         var input_val = document.getElementById("input_num").value;
         for(i=0 ; i<input_val ; i++){
            var element = document.createElement("p");
            element.style.width = "50px";
            element.style.height = "50px";
            element.style.border = "2px solid red";
            element.style.borderRightStyle = "dotted";
            element.style.margin = "30px";
            element.style.borderRadius = "5px";
            element_div.style.display = "flex";
            element_div.style.flexDirection = "row";
            element_div.appendChild(element);
         }
      }
   </script>
</body>
</html>

在上面的示例中，使用者可以看到我們建立了幾個等於使用者給定輸入的正方形。我們使用 borderRightStyle 屬性來設定每個正方形右側邊框的樣式。我們將正方形的右側設定為點狀樣式。

在本教程中，我們學習瞭如何使用 JavaScript DOM 設定右側邊框的樣式。

更新於：2022年10月12日

158 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.