
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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 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.
- Related Articles
- Set the color of the rule between columns with CSS
- How to set the style of the rule between columns with JavaScript?
- How to set the width of the rule between columns with JavaScript?
- Set the style of the rule between columns with CSS
- Set the width of the rule between columns with CSS
- How to set the gap between the columns with JavaScript?
- How to set the column rule properties with JavaScript?
- How to set the color of the top border with JavaScript?
- How to set the color of the right border with JavaScript?
- How to set the color of the text-decoration with JavaScript?
- How to set the color of the left border with JavaScript?
- How to set the color of an elements border with JavaScript?
- How to set outline color with JavaScript?
- How to set the color of the outline around an element with JavaScript?
- How to set the color of the bottom border in JavaScript DOM?
