如何使用JavaScript設定頂部邊框的顏色？

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

HTML元素的輪廓稱為邊框。元素的邊框可以在每一側具有多種顏色。不同的屬性和方法用於為邊框的每一側著色。要使用JavaScript設定頂部邊框的顏色，我們有不同的方法：

  • 使用style.borderTopColor屬性

  • 使用style.borderColor屬性

使用style.borderTopColor屬性

在JavaScript中，元素的style.borderTopColor屬性用於指定元素頂部邊框的顏色。style.borderTopColor屬性在元素物件上可用，該物件可透過document.getElementById()方法訪問。訪問元素物件後，我們可以直接使用style.borderTopColor屬性來設定元素頂部邊框的顏色。

語法

const object = document.getElementById('id')

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

這裡，“id”是元素的id屬性。使用document.getElementById()方法訪問元素物件，並將style.borderTopColor屬性設定為頂部邊框的顏色。

引數

  • color − 元素的頂部邊框顏色。

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

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

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

示例

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

<html>
<head>
   <style>
      div {
         border: 5px solid transparent;
         padding: 10px;
         margin: 10px 0;
         background-color: rgb(251, 255, 196);
      }
   </style>
</head>
<body>
   <p> Set the color of the top border using <i> style.borderTopColor </i> property with JavaScript </p>
   <button onclick="setTopBorderColor()"> Set Top Border Color </button>
   <div id="element1"> JavaScript is Best! </div>
   <div id="element2"> Hello World! </div>
   <div id="element3"> Welcome to Tutorialspoint! </div>
   <div id="element4"> It is transparent border color! </div>
   <script>
     
      // all elements that will set the top border color
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      const element4 = document.getElementById('element4')
      
      // 'Set Top Border Color' button click event handler function
      function setTopBorderColor() {
         element1.style.borderTopColor = 'red'
         element2.style.borderTopColor = 'green'
         element3.style.borderTopColor = 'blue'
         element4.style.borderTopColor = 'transparent'
      }
   </script>
</body>
</html>

使用style.borderColor屬性

元素的style.borderColor屬性用於在JavaScript中指定元素的邊框顏色。style.borderColor屬性在元素的元素物件中可用。要設定頂部邊框顏色，我們需要訪問元素物件，然後可以直接設定style.borderColor屬性。要僅設定頂部邊框顏色，必須將其他所有邊的邊框顏色設定為透明。

語法

const object = document.getElementById('id')

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

在上述語法中，“id”是HTML元素的id屬性。使用document.getElementById()方法，我們訪問元素物件並設定style.borderColor屬性。

引數

  • color − 元素的邊框顏色。

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

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

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

示例

在下面的示例中，我們使用了style.borderColor屬性來使用JavaScript設定頂部邊框的顏色。我們使用了一個輸入欄位來獲取使用者的邊框顏色輸入（顏色名稱、十六進位制顏色程式碼或RGB顏色程式碼），並使用按鈕點選事件將該顏色設定為元素的邊框顏色。

<html>
<body>
   <h3> Set the color of the top border using <i> style.borderColor </i> property with JavaScript </h3>
   <p>Write the top border color to set:</p>
   <input type="text" name="border-color" id="border-color" value="green">
   <button onclick="setTopBorderColor()"> Set Top Border Color </button>
   <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: rgb(251, 255, 196);"> This is an element! </div>
   <script>
      
      // 'Set Top Border Color' button click event handler function
      function setTopBorderColor() {
         const root = document.getElementById('root')
         
         // border-color input field value
         const border_color = document.getElementById('border-color').value
         
         // set the border-color input fields value to element's top border color
         root.style.borderColor = border_color + ' transparent transparent transparent'
      }
   </script>
</body>
</html>

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

更新於：2022年11月9日

437 次瀏覽

開啟您的職業生涯

完成課程獲得認證

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