如何使用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 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告