HTML | DOM Style columns Property

HTML DOM Style columns Property is used to set the width of the column & column count.

Syntax:

  • To Return the column property:
    object.style.columns
  • To Set the column property:
    object.style.columns= "auto|columnwidth columncount|
    initial|inherit"
  • Property Values:

    • Auto: Sets both values of width & count to auto i.e., default(0).
    • columnwidth: Sets the width of the column.
    • columncount: Sets the number of columns.
    • initial: Sets the value to default.
    • inherit: It inherits the value from its parent element.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
          HTML | DOM Style columns Property
        </title>
    </head>
    <body>
      
        <div id="example">
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal. 
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
      
        </div>
        <button onclick="split()">click</button>
      
        <script>
            function split() {
      
                // Set column width and count.
                document.getElementById(
                  "example").style.columns = "200px 2";
      
                // Code for Firefox 
                document.getElementById(
                  "example").style.MozColumns = "200px 2";
      
            }
        </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    • Before clicking on button:
    • After clicking on button:

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

    • Chrome
    • Internet Explorer
    • Safari
    • Opera


    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.