Teach with us

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

Use the columnRuleWidth property to set the width between columns. You can try to run the following code to set the width of the rule between columns with JavaScript −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px solid yellow;
         }
      </style>
   </head>
   <body>
      <p>Click below to change width</p>
      <button onclick="display()">Change Width 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.columnRuleWidth = "8px";
         }
      </script>
   </body>
</html>
Monica Mona
Monica Mona

Student of life, and a lifelong learner

Updated on 23-Jun-2020 12:18:22

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements