如何使用 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属性为右侧边框着色的方法。用户可以遵循任何一种方法为元素的右侧边框着色。

更新于： 2022-11-09

292 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告