
- 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 style of the rule between columns with JavaScript?
Use the columnRuleStyle property to set the style of the rule. You can try to run the following code to set the style of the rule between columns with JavaScript −
Example
<!DOCTYPE html> <html> <head> <style> #myID { column-count: 4; column-rule: 4px dotted yellow; } </style> </head> <body> <p>Click below to change style</p> <button onclick="display()">Change Style 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.columnRuleStyle = "inset"; } </script> </body> </html>
- Related Articles
- Set the style of the rule between columns with CSS
- How to set the color of the rule between columns with JavaScript?
- How to set the width of the rule between columns with JavaScript?
- Set the color 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 style of the top border with JavaScript?
- How to set the style of the right border with JavaScript?
- How to set the style of the bottom border with JavaScript?
- How to set the style of the left border with JavaScript?
- How to set the style of the outline around an element with JavaScript?
- How to set the style of the line in a text decoration with JavaScript?
- How to set the style of an element's border with JavaScript?
- How to set whether the style of the font is normal, italic or oblique with JavaScript?

Advertisements