Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Style columns Property


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

HTML DOM Style columns Property

On clicking the “Change Columns” button −

HTML DOM Style columns Property