如何使用 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 属性获取用户输入的颜色值来设置规则颜色。
