如何使用 JavaScript 设置左侧边框的颜色？

在本教程中，我们将学习如何使用 JavaScript 设置左侧边框的颜色。要使用 JavaScript 设置左侧边框的颜色，请使用borderLeftColor 属性。在此属性上设置您想要的边框颜色。我们也可以应用 borderColor 属性来设置左侧边框的颜色。

边框是 HTML 元素的轮廓。可以使用不同的边框颜色设置不同的边。要使用 JavaScript 设置左侧边框的颜色，我们有不同的方法：

  • 使用 style.borderLeftColor 属性

  • 使用 style.borderColor 属性

使用 Style borderLeftColor 属性

元素的 style borderLeftColor 属性设置元素左侧边框的颜色。首先，我们需要使用 document.getElementById() 方法获取元素的元素对象。其次，我们需要使用 style borderLeftColor 属性来设置左侧边框的颜色。

语法

const object = document.getElementById('id')

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

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

参数

  • color − 元素左侧边框的颜色。

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

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

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

示例

在下面的示例中，我们使用了 style.borderLeftColor 属性来使用 JavaScript 设置左侧边框的颜色。我们使用了三个按钮点击事件来执行三个单独的函数，这些函数设置特定元素的左侧边框颜色。

<html>
<head>
   <style>
      div {
         border: 5px solid transparent;
         padding: 10px;
         margin: 10px 0;
         background-color: bisque;
      }
   </style>
</head>
<body>
   <h2> Setting the left border color with JavaScript using <i> style.borderLeftColor </i> property </h2>
   <h4>Set Left Border Color of Elements:</h4>
   <button onclick="setLeftBorder1()">Element 1</button>
   <button onclick="setLeftBorder2()">Element 2</button>
   <button onclick="setLeftBorder3()">Element 3</button>
   <div id="element1">Element 1</div>
   <div id="element2">Element 2</div>
   <div id="element3">Element 3</div>
   <script>
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      function setLeftBorder1() {
         element1.style.borderLeftColor = 'red'
      }
      function setLeftBorder2() {
         element2.style.borderLeftColor = 'green'
      }
      function setLeftBorder3() {
         element3.style.borderLeftColor = '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'

在上面的语法中，‘element_id’ 是 HTML 元素的 ID。我们使用 document.getElementById() 方法访问元素，然后使用 style.borderColor 属性设置边框颜色。

参数

  • color − 元素的边框颜色。

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

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

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

示例

在下面的示例中，我们使用了 style.borderColor 属性来使用 JavaScript 设置左侧边框的颜色。我们使用了单选按钮来获取用户的边框颜色输入，并使用按钮点击事件设置元素边框的颜色。

<html>
<body>
   <h2> Set the color of the left border using <i> style.borderColor </i> property with JavaScript </h2>
   <div>
      <label for="red">
         <input type="radio" name="color" id="color-red" value="red">
         Red
      </label>
      <label for="green">
         <input type="radio" name="color" id="color-red" value="green">
         Green
      </label>
      <label for="blue">
         <input type="radio" name="color" id="color-red" value="blue">
         Blue
      </label>
      <button onclick="setLeftBorder()">Set Left Border Color</button>
   </div>
   <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: lightyellow;">Welcome to Tutorialspoint!</div>
   <script>
      function setLeftBorder() {
         const root = document.getElementById('root')
         const color = document.querySelector('input[name="color"]:checked').value
         root.style.borderColor = 'transparent transparent transparent ' + color
      }
   </script>
</body>
</html>

在本教程中，我们学习了如何使用 JavaScript 设置左侧边框的颜色。我们已经看到了两种使用style.borderLeftColor 和style.borderColor 属性为左侧边框着色的方法。用户可以遵循任何这些方法为左侧边框着色。

更新于：2022年11月9日

539 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告