如何使用 JavaScript 設定元素邊框的顏色？

在本教程中，我們將學習如何使用 JavaScript 設定元素邊框的顏色。

邊框是 HTML 元素的輪廓。可以使用不同型別的邊框屬性以不同的方式設定邊框樣式。要使用 JavaScript 設定元素邊框的顏色，我們可以使用 style 的 borderColor 屬性。

使用 Style 的 borderColor 屬性

在 JavaScript 中，元素的 style 的 borderColor 屬性用於設定元素邊框的顏色。要設定元素邊框的顏色，我們首先需要使用 document.getElementById() 方法獲取元素物件，然後設定 style.borderColor 屬性。

邊框顏色可以透過以下幾種方式設定：

  • 如果我們只在引數中提供一個顏色值或名稱，則它將在所有四邊新增相同的顏色。

  • 如果我們提供兩個顏色值，第一個將處理頂部和底部邊框顏色，第二個將處理左側和右側邊框顏色。

  • 如果我們提供三個顏色值，則第一個顏色值將作為頂部邊框顏色，第二個作為左側和右側邊框顏色，第三個作為底部邊框顏色。

  • 如果我們按順序提供四個值，它將分別獲取頂部、右側、底部和左側邊框顏色。

語法

const object = document.getElementById('element_id')

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

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

引數

  • color − 元素的邊框顏色。

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

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

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

示例 1

在下面的示例中，我們使用 borderColor 屬性在 JavaScript 中設定元素邊框的顏色。您可以嘗試執行以下程式碼以瞭解如何設定元素邊框的顏色：

<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         height: 300px;
         width: 500px;
         border: thick dashed yellow;
      }
   </style>
</head>
<body>
   <div id="box">
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
   </div>
   <br>
   <p> Click the below button to set the color of border to green.</p>
   <button type="button" onclick="display()">Set new color of border</button>
   <script>
      function display() {
         document.getElementById("box").style.borderColor = "green";
      }
   </script>
</body>
</html>

示例 2

在下面的示例中，我們使用 style.borderColor 屬性在 JavaScript 中設定元素邊框的顏色。我們使用了“設定邊框顏色”按鈕的點選事件來執行“setBorder()”函式，該函式設定多個元素的邊框顏色。

<html>
<head>
   <style>
      div {
         border: 5px solid transparent;
         padding: 10px;
         margin: 10px 0;
         background-color: lightcyan;
      }
   </style>
</head>
<body>
   <h3> Set the color of an elements border using <i> style.borderColor </i>property in JavaScript </h3>
   <button onclick="setBorder()">Set Border Color</button>
   <div id="element1">Single border color</div>
   <div id="element2">Two border colors</div>
   <div id="element3">Three border colors</div>
   <div id="element4">Four border colors</div>
   <script>
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      const element4 = document.getElementById('element4')
      function setBorder() {
         element1.style.borderColor = 'blueviolet'
         element2.style.borderColor = 'crimson yellowgreen'
         element3.style.borderColor = 'orange tomato cadetblue'
         element4.style.borderColor = 'red blue green yellow'
      }
   </script>
</body>
</html>

示例 3

在下面的示例中，我們使用 style borderColor 屬性在 JavaScript 中設定元素邊框的顏色。我們使用了一個顏色選擇器來獲取使用者輸入的邊框顏色，並使用按鈕點選事件將該顏色設定為元素的邊框顏色。

<html>
<body>
   <h2> Set the color of an elements border using <i> style borderColor </i> property in JavaScript </h2>
   <input type="color" name="border-color" id="border-color">
   <button onclick="setBorder()">Set Border Color</button>
   <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: lightcyan; ">Hello World!</div>
   <script>
      function setBorder() {
         const root = document.getElementById('root')
         
         // border-color input field
         const border_color = document.getElementById('border-color')
         
         // set the border-color input fields value to element's border color
         root.style.borderColor = border_color.value
      }
   </script>
</body>
</html>

在本教程中，我們學習瞭如何使用 JavaScript 設定元素邊框的顏色。我們瞭解瞭如何在元素邊框的不同邊上設定不同的顏色。在第一個示例中，我們看到了如何在元素邊框的多個邊上設定顏色，在第二個示例中，我們看到了如何從使用者輸入欄位設定邊框顏色。

更新於: 2022-11-09

7K+ 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.