資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 設定右側邊框的顏色？
在本教程中，我們將學習如何使用 JavaScript 設定右側邊框的顏色。要使用 JavaScript 設定右側邊框的顏色，請使用borderRightColor 屬性。使用此屬性設定右側邊框的顏色。我們也可以應用borderColor 屬性來完成此任務。
邊框是 HTML 元素的輪廓。可以使用不同的屬性為不同邊設定邊框顏色。要使用 JavaScript 設定右側邊框的顏色，我們有不同的方法：
使用 style.borderRightColor 屬性
使用 style.borderColor 屬性
使用 style.borderRightColor 屬性
在 JavaScript 中，元素的 style.borderRightColor 屬性用於設定元素右側邊框的顏色。要設定 style.borderRightColor 屬性，我們需要使用 document.getElementById() 方法訪問元素的物件，並在訪問元素物件後設置 style.borderRightColor 屬性來為元素的右側邊框著色。
語法
const object = document.getElementById('element_id')
object.style.borderRightColor = 'color | transparent | inherit | initial'
使用 document.getElementById() 方法，我們訪問元素物件並設定 style.borderRightColor 屬性。
引數
color − 元素右側邊框的顏色。
transparent − 右側邊框的顏色應為透明。
inherit − 右側邊框顏色繼承自其父元素的屬性。
initial − 右側邊框的顏色設定為預設值。
示例
在下面的示例中，我們使用了 style.borderRightColor 屬性來使用 JavaScript 設定右側邊框的顏色。我們使用了按鈕點選事件來執行“setRightBorder()”函式，該函式將設定多個元素的右側邊框的顏色。
<html> <head> <style> div { border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: rgb(233, 196, 255); } </style> </head> <body> <h2> Set the color of the right border using <i> style.borderRightColor </i> property with JavaScript </h2> <button onclick="setRightBorder()">Set Right Border Color</button> <div id="element1">Welcome to Tutorialspoint!</div> <div id="element2">Hello World!</div> <div id="element3">JavaScript is Best!</div> <script> const element1 = document.getElementById('element1') const element2 = document.getElementById('element2') const element3 = document.getElementById('element3') function setRightBorder() { element1.style.borderRightColor = 'red' element2.style.borderRightColor = 'green' element3.style.borderRightColor = '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'
使用 document.getElementById() 方法，我們訪問元素物件並設定 borderColor 屬性。
引數
color − 元素的邊框顏色。
transparent − 邊框顏色應為透明。
inherit − 邊框顏色繼承其父元素的屬性。
initial − 邊框顏色設定為預設值。
示例
在下面的示例中，我們使用了 style.borderColor 屬性來使用 JavaScript 設定右側邊框的顏色。我們使用了輸入欄位來獲取使用者輸入的邊框顏色（顏色名稱、十六進位制顏色程式碼或 rgb 顏色程式碼），並使用按鈕點選事件來設定元素邊框的顏色。
<html> <body> <h2> Set the color of the right border using <i> style.borderColor </i> property with JavaScript </h2> <input type="text" name="border-color" id="border-color" value=# FF0000> <button onclick="setRightBorder()">Set Right Border Color</button> <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: rgb(233, 196, 255); "> Welcome to Tutorialspoint! </div> <script> function setRightBorder() { 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 right border color root.style.borderColor = 'transparent ' + border_color + ' transparent transparent' } </script> </body> </html>
在本教程中，我們學習瞭如何使用 JavaScript 設定右側邊框的顏色。我們已經看到了兩種使用 style.borderRightColor 和 style.borderColor 屬性為右側邊框著色的方法。使用者可以遵循任何一種方法來為元素的右側邊框著色。
292 次瀏覽
