Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the color of the rule between columns with JavaScript?
In this tutorial, we will learn how to set the color of the rule between columns with JavaScript.
Multiple columns are used to increase the readability of long paragraphs or articles. The column-count CSS property is used to divide the text into columns. To set the color of the rule between columns with JavaScript, we use the columnRuleColor property of the style object.
Using the style.columnRuleColor Property
In JavaScript, the style.columnRuleColor property of an element is used to set the color of the rule between columns. We can set colors using color names, hex codes, or RGB values. First, access the element using document.getElementById(), then use the style.columnRuleColor property.
Syntax
const element = document.getElementById('element_id');
element.style.columnRuleColor = 'color | inherit | initial';
Parameters
color ? The color of the rule between columns (color name, hex, RGB).
inherit ? Inherits the color from the parent element.
initial ? Sets the color to its default value.
Example 1: Setting Rule Color with Button Click
In this example, we use the style.columnRuleColor property to change the rule color from yellow to red when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
column-count: 4;
column-rule: 4px outset yellow;
padding: 10px;
margin: 5px 0px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Using style.columnRuleColor Property</h2>
<p>Click the button to set the color of rule between columns:</p>
<button onclick="changeColor()">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 changeColor() {
document.getElementById("myID").style.columnRuleColor = "red";
}
</script>
</body>
</html>
Example 2: Dynamic Color Selection with Color Picker
This example uses a color picker input to allow users to select any color for the column rule. The selected color is applied when the button is clicked.
<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>
function setRuleColor() {
const root = document.getElementById('root');
const color = document.getElementById('color').value;
root.style.columnRuleColor = color;
}
</script>
</body>
</html>
Key Points
- The
columnRuleColorproperty only affects the color, not the width or style of the rule - Column rules are only visible when there are multiple columns and content flows between them
- Accepts any valid CSS color value: names, hex codes, RGB, HSL, etc.
- Works in conjunction with
column-countandcolumn-ruleCSS properties
Conclusion
The style.columnRuleColor property provides a simple way to dynamically change column rule colors with JavaScript. Use it with color pickers or predefined colors to enhance your multi-column layouts.
262 Views
