如何使用 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 属性为顶部边框着色的两种方法。用户可以按照其中任何一种方法为元素的顶部边框着色。
