如何使用 JavaScript 設定左側邊框的顏色？

在本教程中，我們將學習如何使用 JavaScript 設定左側邊框的顏色。要使用 JavaScript 設定左側邊框的顏色，請使用borderLeftColor 屬性。在此屬性上設定您想要的邊框顏色。我們也可以應用 borderColor 屬性來設定左側邊框的顏色。

邊框是 HTML 元素的輪廓。可以使用不同的邊框顏色設定不同的邊。要使用 JavaScript 設定左側邊框的顏色，我們有不同的方法：

  • 使用 style.borderLeftColor 屬性

  • 使用 style.borderColor 屬性

使用 Style borderLeftColor 屬性

元素的 style borderLeftColor 屬性設定元素左側邊框的顏色。首先，我們需要使用 document.getElementById() 方法獲取元素的元素物件。其次，我們需要使用 style borderLeftColor 屬性來設定左側邊框的顏色。

語法

const object = document.getElementById('id')

object.style.borderLeftColor = 'color | transparent | inherit | initial'

document.getElementById() 方法用於訪問元素，然後我們使用 style borderLeftColor 屬性設定左側邊框的顏色。

引數

  • color − 元素左側邊框的顏色。

  • transparent − 左側邊框的顏色應為透明。

  • inherit − 左側邊框的顏色繼承自其父元素的屬性。

  • initial − 左側邊框的顏色設定為預設值。

示例

在下面的示例中，我們使用了 style.borderLeftColor 屬性來使用 JavaScript 設定左側邊框的顏色。我們使用了三個按鈕點選事件來執行三個單獨的函式，這些函式設定特定元素的左側邊框顏色。

<html>
<head>
   <style>
      div {
         border: 5px solid transparent;
         padding: 10px;
         margin: 10px 0;
         background-color: bisque;
      }
   </style>
</head>
<body>
   <h2> Setting the left border color with JavaScript using <i> style.borderLeftColor </i> property </h2>
   <h4>Set Left Border Color of Elements:</h4>
   <button onclick="setLeftBorder1()">Element 1</button>
   <button onclick="setLeftBorder2()">Element 2</button>
   <button onclick="setLeftBorder3()">Element 3</button>
   <div id="element1">Element 1</div>
   <div id="element2">Element 2</div>
   <div id="element3">Element 3</div>
   <script>
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      function setLeftBorder1() {
         element1.style.borderLeftColor = 'red'
      }
      function setLeftBorder2() {
         element2.style.borderLeftColor = 'green'
      }
      function setLeftBorder3() {
         element3.style.borderLeftColor = 'blue'
      }
   </script>
</body>
</html>

使用 style.borderColor 屬性

元素的 style.borderColor 屬性用於在 JavaScript 中指定元素邊框的顏色。在設定 style.borderColor 屬性之前，首先需要使用 document.getElementById() 方法獲取元素物件。要僅設定左側邊框的顏色，我們需要將所有其他邊的顏色設定為透明，併為左側邊框提供特定的顏色。

語法

const object = document.getElementById('element_id')

object.style.borderColor = 'color | transparent | inherit | initial'

在上面的語法中，“element_id”是 HTML 元素的 id。我們使用 document.getElementById() 方法訪問元素，然後使用 style.borderColor 屬性設定邊框顏色。

引數

  • color − 元素的邊框顏色。

  • transparent − 邊框顏色應為透明。

  • inherit − 邊框顏色繼承其父元素的屬性。

  • initial − 邊框顏色設定為預設值。

示例

在下面的示例中，我們使用了 style.borderColor 屬性來使用 JavaScript 設定左側邊框的顏色。我們使用了單選按鈕來獲取使用者的邊框顏色輸入，並使用按鈕點選事件設定元素邊框的顏色。

<html>
<body>
   <h2> Set the color of the left border using <i> style.borderColor </i> property with JavaScript </h2>
   <div>
      <label for="red">
         <input type="radio" name="color" id="color-red" value="red">
         Red
      </label>
      <label for="green">
         <input type="radio" name="color" id="color-red" value="green">
         Green
      </label>
      <label for="blue">
         <input type="radio" name="color" id="color-red" value="blue">
         Blue
      </label>
      <button onclick="setLeftBorder()">Set Left Border Color</button>
   </div>
   <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: lightyellow;">Welcome to Tutorialspoint!</div>
   <script>
      function setLeftBorder() {
         const root = document.getElementById('root')
         const color = document.querySelector('input[name="color"]:checked').value
         root.style.borderColor = 'transparent transparent transparent ' + color
      }
   </script>
</body>
</html>

在本教程中，我們學習瞭如何使用 JavaScript 設定左側邊框的顏色。我們已經看到了兩種使用 style.borderLeftColor 和 style.borderColor 屬性為左側邊框著色的方法。使用者可以遵循任何一種方法為左側邊框著色。

更新於：2022年11月9日

540 次瀏覽

啟動您的職業生涯

完成課程獲得認證

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