HTML | DOM Style columns Property

Read

Discuss

HTML DOM Style columns Property is used to set the width of the column & column count.

Syntax:

To Return the column property:
```
object.style.columns
```

To Set the column property:

object.style.columns= "auto|columnwidth columncount|
initial|inherit"

Property Values:

Auto: Sets both values of width & count to auto i.e., default(0).
columnwidth: Sets the width of the column.
columncount: Sets the number of columns.
initial: Sets the value to default.
inherit: It inherits the value from its parent element.

Example:

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
      HTML | DOM Style columns Property 
    </title> 
</head> 
<body> 
  
    <div id="example"> 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal.  
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
  
    </div> 
    <button onclick="split()">click</button> 
  
    <script> 
        function split() { 
  
            // Set column width and count. 
            document.getElementById( 
              "example").style.columns = "200px 2"; 
  
            // Code for Firefox  
            document.getElementById( 
              "example").style.MozColumns = "200px 2"; 
  
        } 
    </script> 
  
</body> 
  
</html> 

Output:

Before clicking on button:
After clicking on button:

Supported Browsers: The browser supported by HTML | DOM Style columns Property are listed below:

Google Chrome 50 and above
Edge 12 and above
Firefox 52 and above
Internet Explorer 10 and above
Safari 9 and above
Opera 11.1 and above

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 08 Aug, 2022

HTML | DOM MouseEvent offsetX Property

HTML | DOM Style height Property

HTML | DOM Style columns Property

Please Login to comment...