如何使用 JavaScript 设置元素边框的颜色？

在本教程中，我们将学习如何使用 JavaScript 设置元素边框的颜色。

边框是 HTML 元素的轮廓。可以使用不同类型的边框属性以不同的方式设置边框样式。要使用 JavaScript 设置元素边框的颜色，我们可以使用 style 的 borderColor 属性。

使用 Style 的 borderColor 属性

在 JavaScript 中，元素的 style 的 borderColor 属性用于设置元素边框的颜色。要设置元素边框的颜色，我们首先需要使用 document.getElementById() 方法获取元素对象，然后设置 style.borderColor 属性。

边框颜色可以通过以下几种方式设置：

  • 如果我们只在参数中提供一个颜色值或名称，则它将在所有四边添加相同的颜色。

  • 如果我们提供两个颜色值，第一个将处理顶部和底部边框颜色，第二个将处理左侧和右侧边框颜色。

  • 如果我们提供三个颜色值，则第一个颜色值将作为顶部边框颜色，第二个作为左侧和右侧边框颜色，第三个作为底部边框颜色。

  • 如果我们按顺序提供四个值，它将分别获取顶部、右侧、底部和左侧边框颜色。

语法

const object = document.getElementById('element_id')

object.style.borderColor = 'color | transparent | inherit | initial'

我们使用 document.getElementById() 方法访问元素，然后使用 style.borderColor 属性设置边框颜色。

参数

  • color − 元素的边框颜色。

  • transparent − 边框颜色应为透明。

  • inherit − 边框颜色继承其父元素的属性。

  • initial − 边框颜色设置为默认值。

示例 1

在下面的示例中，我们使用 borderColor 属性在 JavaScript 中设置元素边框的颜色。您可以尝试运行以下代码以了解如何设置元素边框的颜色：

<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         height: 300px;
         width: 500px;
         border: thick dashed yellow;
      }
   </style>
</head>
<body>
   <div id="box">
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
   </div>
   <br>
   <p> Click the below button to set the color of border to green.</p>
   <button type="button" onclick="display()">Set new color of border</button>
   <script>
      function display() {
         document.getElementById("box").style.borderColor = "green";
      }
   </script>
</body>
</html>

示例 2

在下面的示例中，我们使用 style.borderColor 属性在 JavaScript 中设置元素边框的颜色。我们使用了“设置边框颜色”按钮的点击事件来执行“setBorder()”函数，该函数设置多个元素的边框颜色。

<html>
<head>
   <style>
      div {
         border: 5px solid transparent;
         padding: 10px;
         margin: 10px 0;
         background-color: lightcyan;
      }
   </style>
</head>
<body>
   <h3> Set the color of an elements border using <i> style.borderColor </i>property in JavaScript </h3>
   <button onclick="setBorder()">Set Border Color</button>
   <div id="element1">Single border color</div>
   <div id="element2">Two border colors</div>
   <div id="element3">Three border colors</div>
   <div id="element4">Four border colors</div>
   <script>
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      const element4 = document.getElementById('element4')
      function setBorder() {
         element1.style.borderColor = 'blueviolet'
         element2.style.borderColor = 'crimson yellowgreen'
         element3.style.borderColor = 'orange tomato cadetblue'
         element4.style.borderColor = 'red blue green yellow'
      }
   </script>
</body>
</html>

示例 3

在下面的示例中，我们使用 style borderColor 属性在 JavaScript 中设置元素边框的颜色。我们使用了一个颜色选择器来获取用户输入的边框颜色，并使用按钮点击事件将该颜色设置为元素的边框颜色。

<html>
<body>
   <h2> Set the color of an elements border using <i> style borderColor </i> property in JavaScript </h2>
   <input type="color" name="border-color" id="border-color">
   <button onclick="setBorder()">Set Border Color</button>
   <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: lightcyan; ">Hello World!</div>
   <script>
      function setBorder() {
         const root = document.getElementById('root')
         
         // border-color input field
         const border_color = document.getElementById('border-color')
         
         // set the border-color input fields value to element's border color
         root.style.borderColor = border_color.value
      }
   </script>
</body>
</html>

在本教程中，我们学习了如何使用 JavaScript 设置元素边框的颜色。我们了解了如何在元素边框的不同边上设置不同的颜色。在第一个示例中，我们看到了如何在元素边框的多个边上设置颜色，在第二个示例中，我们看到了如何从用户输入字段设置边框颜色。

更新于: 2022-11-09

7K+ 次浏览

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告