Set how many columns an element should span across with JavaScript.

JavascriptWeb DevelopmentFront End Scripts

Set the columnSpan property to all, if you want the columns to span across in JavaScript. You can try to run the following code to return how many columns an element should span across with JavaScript −

Example

Live Demo
<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
         }
      </style>
   </head>
   
   <body>
      <p>Note- The columnSpan property won't work in Firefox.</p>
      <button onclick = "display()">Span Columns</button>
      <div id = "myID">
         <h1 id = "h1ID">Heading Level 1 for Demo</h1>
         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("h1ID").style.columnSpan = "all";
         }
      </script>
      
   </body>
</html>
raja
Published on 27-Feb-2018 11:51:06
Advertisements