How to set the gap between the columns with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the gap between the columns with JavaScript.

The readability of lengthy paragraphs or articles is improved by dividing them into multiple columns. The text is divided into multiple columns using the ‘column-count’ CSS property. There needs to be a space or gap between the columns to make each column separate from the other.

To set the gap between the columns with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them −

Using the style.columnGap property
Using the style.setProperty() method

Using the style.columnGap Property

The style.columnGap property of an element is used to set the gap between the columns of an element that contains the long text. Firstly, we need to access the element object using the document.getElementById() method and then use the style.columnGap property to set the gap between columns.

Syntax

const element = document.getElementById('id')
element.style.columnGap = 'length | normal | inherit | initial'

In the above syntax, ‘id’ is the id attribute of an element. The document.getElementById() method is used to access the element and style.columnGap property is used to set the gap between columns.

Parameters

length − The length of the gap between columns.
normal − It is the default value. Set the normal gap between columns.
inherit − The gap between columns is inherited by its parent element’s property.
initial − The gap between columns sets to default.

Example

In the below example, we have used the style.columnGap property to set the gap between the columns with JavaScript. We have used a button “Set Column Gap” click event to execute the “setColumnGap()” function that sets the gap between the columns.


<html>
<head>
   <style>
      #root {
         column-count: 4;
         padding: 10px;
         margin: 5px 0px;
         border: 1px solid black;
         background-color: aliceblue;
      }
   </style>
</head>
<body>
   <h2> Using <i> style.columnGap </i> property</h2>
   <p> Click the "Set Column Gap" button to set the gap between the columns to 70px. </p>
   <button onclick="setColumnGap()"> Set Column Gap </button>
   <div id="root">
      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>
      
      // 'Set Column Gap' button click event handler function
      function setColumnGap() {
         const root = document.getElementById('root')
         
         // set the gap between the columns using style.columnGap property
         root.style.columnGap = '70px'
      }
   </script>
</body>
</html>

Using the style.setProperty() Method

In JavaScript, the style.setProperty method sets a property of an element, either new or existing. The gap between the columns can also be set using this method. Firstly, the document.getElementById() method is used to access the element and then set the ‘column-gap’ property using the style.setProperty method. In the property name parameter of the style.setProperty method should be ‘column-gap’, and the value and priority will be as per the user’s requirement.

Syntax

const element = document.getElementById('id')
element.style.setProperty(property_name, value, priority)

In the above syntax, the document.getElementById() method is used to access the element object of an HTML element with the id attribute sets as ‘id’, and then we use the style.setProperty method on that element object.

Parameters

property_name − The name of the property to be set.
value − The new value of the property.
priority − The priority of the property value (optional).

Example

In the below example, we have used the style.setProperty method to set the gap between the columns with JavaScript. We have used an input field to take the user’s input for the length of the gap between the columns. A button, “Set Column Gap,” is associated with a click event that executes the “setColumnGap()” function, which sets the gap between the columns as per the input field’s value.


<html>
<head>
   <style>
      #root {
         column-count: 4;
         padding: 10px;
         margin: 5px 0px;
         border: 1px solid black;
         background-color: aliceblue;
      }
   </style>
</head>
<body>
   <h2> Set the gap between the columns using <i> style.setProperty method </i> with JavaScript </h2>
   <h4> Enter the gap (in px or %)between the columns: </h4>
   <input type="text" name="gap" id="gap" value="50px">
   <button onclick="setColumnGap()"> Set Column Gap </button>
   <div id="root">
      Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint.
   </div>
   <script>
      
      // 'Set Column Gap' button click event handler function
      function setColumnGap() {
         const root = document.getElementById('root')
         
         // user input value for the column gap
         const gap = document.getElementById('gap').value
         
         // set the gap between the columns using the style.setProperty method
         root.style.setProperty('column-gap', gap)
      }
   </script>
</body>
</html>

Try to enter input in px or % and see how the column gap is set.

In this tutorial, we learned how to set the gap between the columns with JavaScript. We have used the style.columnGap property and the style.setProperty method to set the gap between the columns. In the first example, we used a button click event to set a predefined value for the column gap using the style.columnGap property, and in the second example, we take the user input value to set the column gap using the style.setProperty method. Users can use any of these approaches as per their requirements.