Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style columns Property

  • Last Updated : 31 Jul, 2019

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:




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

    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

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :