How to set column width and column count with JavaScript?

Javascript Web Development Front End Scripts

To set the column width and column count in a single declaration, use the JavaScript columns property.

Example

You can try to run the following code to set column width and column count with JavaScript −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px solid yellow;
         }
      </style>
   </head>
   <body>
      <p>Click below to change the column count to 2 and minimum size</p>
      <button onclick="display()">Change Column count and set size</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.columns = "70px 2";
         }
      </script>
   </body>
</html>

Vikyath Ram

Updated on: 23-Jun-2020

557 Views

Kickstart Your Career

Get certified by completing the course

Get Started