Aquileo | HTML | DOM Style columnCount Property

The DOM Style columnCount property specifies a number that defines the number of columns an element should be divided into. Syntax :

To return the value:
```
object.style.columnCount
```

To set the value:

object.style.columnCount = "number|auto|initial|inherit"

Property Values:

number: Specifies the number of columns.
auto: Default value, depend on some properties.
initial: Sets the default value.
inherit: Inherit property from parent element.

Return Value: This will return a string that represents the column-count property of an element.

number: It specifies the number of columns into which all the text will flow. Example-1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM Style columnCount Property
    </title>
    <style>
        #mainDIV {
            width: 700px;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-gap: 50px;
        }
        
        #p1 {
            column-gap: 50px;
        }
    </style>
</head>

<body>

    <div id="mainDIV">
        <p id="p1">
            <u style="color: green; 
                  font-size: 20px;">
            Welcome to GeeksforGeeks.!
        </u><br> 
        An operating system acts as an intermediary
        between the user of a computer and computer 
        hardware. The purpose of an operating system
        is to provide an environment in which a user
        can execute programs in a convenient and 
        efficient manner. An operating system is 
        software that manages the computer hardware.
        The hardware must provide appropriate 
        mechanisms to ensure the correct operation
        of the computer system and to prevent a user
        programs from interfering with the proper 
        operation of the system.
      
      </p>
    </div>
    <br>
    <input type="button" 
           onclick="mainFunction()" value="Submit" />
    <script>
        function mainFunction() {
          
            //  Set columnCount.
            document.getElementById(
              "mainDIV").style.columnCount = "4";
        }
    </script>

</body>

</html>

Output :

Before Click:
After Click:

auto: It is default value and depends upon the property like columnWidth. Example-2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM Style columnCount Property
    </title>
    <style>
        #mainDIV {
            width: 700px;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
        }
        
        #p1 {
            column-gap: 50px;
        }
    </style>
</head>

<body>

    <div id="mainDIV">
        <p id="p1"><u style="color: green;
                             font-size: 20px;">
          Welcome to GeeksforGeeks.!
        </u><br>
        An operating system acts as an intermediary
        between the user of a computer and computer 
        hardware. The purpose of an operating system
        is to provide an environment in which a user
        can execute programs in a convenient and 
        efficient manner. An operating system is 
        software that manages the computer hardware.
        The hardware must provide appropriate 
        mechanisms to ensure the correct operation
        of the computer system and to prevent user
        programs from interfering with the proper 
        operation of the system.
        </p>
    </div>
    <br>
    <input type="button" 
           onclick="mainFunction()"
           value="Submit" />
    <script>
        function mainFunction() {
          
            document.getElementById(
              "mainDIV").style.columnWidth = "100px";
           
            //  Set columnCount.
            document.getElementById(
              "mainDIV").style.columnCount = "auto";
        }
    </script>

</body>

</html>

Output:

Before Click:
After Click:

initial: It sets the property value to its default value of the property. Example-3:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM Style columnCount Property
    </title>
    <style>
        #mainDIV {
            width: 700px;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 4;
        }
        
        #p1 {
            column-gap: 50px;
        }
    </style>
</head>

<body>

    <div id="mainDIV">
        <p id="p1"><u style="color: green; 
                             font-size: 20px;">
          Welcome to GeeksforGeeks.!
        </u><br>
        An operating system acts as an intermediary
        between the user of a computer and computer 
        hardware. The purpose of an operating system
        is to provide an environment in which a user
        can execute programs in a convenient and 
        efficient manner. An operating system is 
        software that manages the computer hardware.
        The hardware must provide appropriate 
        mechanisms to ensure the correct operation
        of the computer system and to prevent user
        programs from interfering with the proper 
        operation of the system.
      </p>
    </div>
    <br>
    <input type="button" onclick="mainFunction()"
           value="Submit" />
    
  <script>
        function mainFunction() {
        
            //  Set columnCount.
            document.getElementById(
              "mainDIV").style.columnCount = "initial";
        }
    </script>

</body>

</html>

Output:

Before Click:
After Click:

inherit: It inherits this property from its parent element. Example-4:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM Style columnCount Property
    </title>
    <style>
        #mainDIV {
            width: 700px;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
        }
        
        #p1 {
            column-gap: 50px;
            column-count: 4;
        }
    </style>
</head>

<body>

    <div id="mainDIV">
        <p id="p1"><u style="color: green; 
                             font-size: 20px;">
          Welcome to GeeksforGeeks.!
        </u><br> 
        An operating system acts as an intermediary
        between the user of a computer and computer 
        hardware. The purpose of an operating system
        is to provide an environment in which a user
        can execute programs in a convenient and 
        efficient manner. An operating system is 
        software that manages the computer hardware.
        The hardware must provide appropriate 
        mechanisms to ensure the correct operation
        of the computer system and to prevent user
        programs from interfering with the proper 
        operation of the system.
      </p>
    </div>
    <br>
    <input type="button" onclick="mainFunction()"
           value="Submit" />
    
  <script>
        function mainFunction() {
          
          //  Set columnCount.
          document.getElementById(
              "p1").style.columnCount = "inherit";
        }
    </script>

</body>

</html>

Output:

Before Click:
After Click:

Note:

MozColumnRule

Supported Browsers:

HTML | DOM Style columnCount Property

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

HTML | DOM Style columnCount Property

Explore