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:

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

Output:

Before Click:
After Click:

Note: Use MozColumnRule for Mozilla Firefox.

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

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

Article Tags :

HTML

Web Technologies

HTML-DOM