Skip to content
Related Articles

Related Articles

HTML | DOM Style columnCount Property
  • Last Updated : 31 Jul, 2019
GeeksforGeeks - Summer Carnival Banner

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:






    <!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:
  2. 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:
  3. 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:
  4. 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
    • Edge
    • Firefox
    • Opera
    • Safari

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :