HTML | DOM Style columnCount Property

Last Updated : 07 Jul, 2022

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:

<!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:

<!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:

<!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:

<!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> 