如何使用 JavaScript 设置列间分隔线的颜色？

在本教程中，我们将学习如何使用 JavaScript 设置列间分隔线的颜色。

使用多列可以提高长段落或文章的可读性。`column-count` CSS 属性用于将文本分成几列。要使用 JavaScript 设置列间分隔线的颜色，我们使用 `style` 对象的 `columnRuleColor` 属性，该属性位于 HTML 元素的 `element` 对象中。

使用 style.columnRuleColor 属性

在 JavaScript 中，元素的 `style.columnRuleColor` 属性用于设置元素列间分隔线的颜色。我们可以使用颜色名称、十六进制颜色代码或 RGB 颜色代码设置任何颜色。首先，我们需要使用 `document.getElementById()` 方法访问元素对象，然后使用 `style.columnRuleColor` 属性设置列间分隔线的颜色。

语法

const object = document.getElementById('element_id')

object.style.columnRuleColor = 'color | inherit | initial'

这里“element_id”是 HTML 元素的 ID。我们使用 `document.getElementById()` 方法访问该元素，然后使用 `style.columnRuleColor` 属性设置列间分隔线的颜色。

参数

  • color − 列间分隔线的颜色。

  • inherit − 列间分隔线的颜色继承自其父元素的属性。

  • initial − 将列间分隔线的颜色设置为默认值。

示例 1

在下面的示例中，我们使用 `style.columnRuleColor` 属性使用 JavaScript 设置列间分隔线的颜色。我们使用了按钮“设置分隔线颜色”的点击事件来执行 `setRuleColor()` 函数，该函数设置列间分隔线的颜色。

<!DOCTYPE html>
<html>
<head>
   <style>
      #myID {
         column-count: 4;
         column-rule: 4px outset yellow;
      }
   </style>
</head>
<body>
   <h2> Using style.columnRuleColor Property </h2>
   <p>Click the below button to set the color of rule between columns:</p>
   <button onclick="display()">Change Color between Columns</button>
   <div id="myID">
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text.
   </div>
   <script>
      function display() {
         document.getElementById("myID").style.columnRuleColor = "red";
      }
   </script>
</body>
</html>

示例 2

在下面的示例中，我们使用 `style.columnRuleColor` 属性使用 JavaScript 设置列间分隔线的颜色。我们使用了一个颜色选择器来获取用户输入的列间分隔线的颜色，并通过按钮点击事件将该颜色设置为元素的规则。按钮“设置分隔线颜色”的点击事件将执行 `setRuleColor()` 函数，该函数使用用户输入的颜色设置列间分隔线的颜色。

<html>
<head>
   <style>
      #root {
         column-count: 4;
         column-rule: 4px outset black;
         padding: 10px;
         margin: 5px 0px;
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h2> Using the style.columnRuleColor Property </h2>
   <p> Pick a color to set the color of rule between columns: </p>
   <input type="color" name="color" id="color">
   <button onclick="setRuleColor()"> Set Rule Color </button>
   <div id="root">
      Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. 
      Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. 
      Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. 
      Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint.
   </div>
   <script>
      // 'Set Rule Color' button click event handler function
      function setRuleColor() {
         const root = document.getElementById('root')
         // user input color
         const color = document.getElementById('color').value
         // set the color of the rule between columns to the user input color using the style.columnRuleColor property
         root.style.columnRuleColor = color
      }
   </script>
</body>
</html>

在本教程中，我们学习了如何使用 JavaScript 设置列间分隔线的颜色。我们使用了 `style.columnRuleColor` 属性来设置列间分隔线的颜色。在第一个示例中，我们看到了如何使用 `style.columnRuleColor` 属性设置元素的分隔线颜色，在第二个示例中，我们看到了如何使用输入字段和 `style.columnRuleColor` 属性获取用户输入的颜色值来设置分隔线颜色。

更新于：2022年11月9日

152 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告