The HTML DOM columns property is used for manipulating columnWidth and columnCount property.
Following is the syntax for −
Setting the columns property −
object.style.columns = "auto|column-width column-count|initial|inherit"
The above property values are explained as follows −
Value | Description |
---|---|
Auto | Thissets the column-width and column-count to auto and is the defaultvalue. |
columnWidth | Forspecifying the column width. |
columnCount | Forspecifying the column numbers. |
initial | Forsetting this property to initial value. |
inherit | Toinherit the parent property value |
Let us look at an example for the columns property −
Example
<!DOCTYPE html> <html> <head> <style> #DIV1{ columns: 5rem auto; } img { border: 1px solid brown; } </style> <script> function changeColumns(){ document.getElementById("DIV1").style.columns="10px 3"; document.getElementById("Sample").innerHTML="The columns are now modified"; } </script> </head> <body> <div id="DIV1"> <img src="https://www.tutorialspoint.com/images/xamarian.png"><br/> <img src="https://www.tutorialspoint.com/images/pl-sql.png"><br/> <img src="https://www.tutorialspoint.com/images/asp-net.png"><br/> <img src="https://www.tutorialspoint.com/images/powerbi.png"><br/> <img src="https://www.tutorialspoint.com/images/Tableau.png"><br/> <img src="https://www.tutorialspoint.com/images/Big-Data-Analytics.png"><br/> <img src="https://www.tutorialspoint.com/images/home_time_series.png"><br/> <img src="https://www.tutorialspoint.com/images/microsoftproject.png"><br/> </div> <p>Change the above div columns property by clicking the below button</p> <button onclick="changeColumns()">Change Columns</button> <p id="Sample"></p> </body> </html>
Output
On clicking the “Change Columns” button −