How to set the color of the rule between columns with JavaScript?

Javascript Web Development Front End Technology

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 some columns. To set the color of the rule between columns with JavaScript, we used the columnRuleColor property of the style object, which is in the element object of an HTML element.

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 of an element. We can set any colors using the color name, hex color code, or RGB color code. Firstly, we need to access the element object using the document.getElementById() method and then use the style.columnRuleColor property to set the color of the rule between columns.

Syntax

const object = document.getElementById('element_id')

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

Here ‘element_id’ is the id of an HTML element. We are accessing the element using the document.getElementById() method, and then we set the color of the rule between columns using the style.columnRuleColor property.

Parameters

color − The color of the rule between columns.
inherit − The color of the rule between columns is inherited by its parent element’s property.
initial − The color of the rule between columns sets to default.

Example 1

In the below example, we have used the style.columnRuleColor property to set the color of the rule between columns with JavaScript. We have used a button “Set Rule Color” click event to execute the “setRuleColor()” function that sets the color of the rule between columns.


<!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>

Example 2

In the below example, we have used the style.columnRuleColor property to set the color of the rule between columns with JavaScript. We have used a color picker to take the user’s input of the color of the rule between columns and set that color to the element’s rule using a button click event. The button “Set Rule Color” click the event to execute the “setRuleColor()” function that sets the color of the rule between columns with the user input color.


<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>

In this tutorial, we learned how to set the color of the rule between columns with JavaScript. We have used the style.columnRuleColor property to set the color of the rule between columns. In the first example, we see how to set the rule color of an element using the style.columnRuleColor property, and in the second example, we see how to take a user input color value to set the rule color using the input field and the style.columnRuleColor property.