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

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告