如何使用 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-09

437 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.