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

Javascript Web Development Front End Scripts

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

Live Demo

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

Fendadis John

Updated on: 23-Jun-2020

59 Views

Kickstart Your Career

Get certified by completing the course

Get Started