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"
- 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.
-
Before clicking on button:
-
After clicking on button:
- Google Chrome 50 and above
- Edge 12 and above
- Firefox 52 and above
- Internet Explorer 10 and above
- Safari 9 and above
- Opera 11.1 and above
Property Values:
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:
Supported Browsers: The browser supported by HTML | DOM Style columns Property are listed below: