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.

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

      Output :

    • Before Click:
    • After Click:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

      Output:

    • Before Click:
    • After Click:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

      Output:

    • Before Click:
    • After Click:
  4. inherit: It inherits this property from its parent element.
    Example-4:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

      Output:

    • Before Click:
    • After Click:
  5. Note: Use MozColumnRule for Mozilla Firefox.

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

    • Google Chrome
    • Edge
    • Firefox
    • Opera
    • Safari


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.