HTML | DOM Style columnCount Property
The DOM Style columnCount property specifies a number that defines the number of columns an element should be divided into.
Syntax :
- To return the value:
object.style.columnCount
- To set the value:
object.style.columnCount = "number|auto|initial|inherit"
Property Values:
- number: Specifies the number of columns.
- auto: Default value, depend on some properties.
- initial: Sets the default value.
- inherit: Inherit property from parent element.
Return Value: This will return a string that represents the column-count property of an element.
- number: It specifies the number of columns into which all the text will flow.
Example-1:<!DOCTYPE html><html><head><title>HTML | DOM Style columnCount Property</title><style>#mainDIV {width: 700px;height: 50%;border: 2px solid green;padding: 10px;column-gap: 50px;}#p1 {column-gap: 50px;}</style></head><body><divid="mainDIV"><pid="p1"><ustyle="color: green;font-size: 20px;">Welcome to GeeksforGeeks.!</u><br>An operating system acts as an intermediarybetween the user of a computer and computerhardware. The purpose of an operating systemis to provide an environment in which a usercan execute programs in a convenient andefficient manner. An operating system issoftware that manages the computer hardware.The hardware must provide appropriatemechanisms to ensure the correct operationof the computer system and to prevent a userprograms from interfering with the properoperation of the system.</p></div><br><inputtype="button"onclick="mainFunction()"value="Submit"/><script>function mainFunction() {// Set columnCount.document.getElementById("mainDIV").style.columnCount = "4";}</script></body></html>- Output :
- Before Click:
- After Click:
- Before Click:
- auto: It is default value and depends upon the property like columnWidth.
Example-2:<!DOCTYPE html><html><head><title>HTML | DOM Style columnCount Property</title><style>#mainDIV {width: 700px;height: 50%;border: 2px solid green;padding: 10px;}#p1 {column-gap: 50px;}</style></head><body><divid="mainDIV"><pid="p1"><ustyle="color: green;font-size: 20px;">Welcome to GeeksforGeeks.!</u><br>An operating system acts as an intermediarybetween the user of a computer and computerhardware. The purpose of an operating systemis to provide an environment in which a usercan execute programs in a convenient andefficient manner. An operating system issoftware that manages the computer hardware.The hardware must provide appropriatemechanisms to ensure the correct operationof the computer system and to prevent userprograms from interfering with the properoperation of the system.</p></div><br><inputtype="button"onclick="mainFunction()"value="Submit"/><script>function mainFunction() {document.getElementById("mainDIV").style.columnWidth = "100px";// Set columnCount.document.getElementById("mainDIV").style.columnCount = "auto";}</script></body></html>- Output:
- Before Click:
- After Click:
- Before Click:
- initial: It sets the property value to its default value of the property.
Example-3:<!DOCTYPE html><html><head><title>HTML | DOM Style columnCount Property</title><style>#mainDIV {width: 700px;height: 50%;border: 2px solid green;padding: 10px;column-count: 4;}#p1 {column-gap: 50px;}</style></head><body><divid="mainDIV"><pid="p1"><ustyle="color: green;font-size: 20px;">Welcome to GeeksforGeeks.!</u><br>An operating system acts as an intermediarybetween the user of a computer and computerhardware. The purpose of an operating systemis to provide an environment in which a usercan execute programs in a convenient andefficient manner. An operating system issoftware that manages the computer hardware.The hardware must provide appropriatemechanisms to ensure the correct operationof the computer system and to prevent userprograms from interfering with the properoperation of the system.</p></div><br><inputtype="button"onclick="mainFunction()"value="Submit"/><script>function mainFunction() {// Set columnCount.document.getElementById("mainDIV").style.columnCount = "initial";}</script></body></html>- Output:
- Before Click:
- After Click:
- Before Click:
- inherit: It inherits this property from its parent element.
Example-4:<!DOCTYPE html><html><head><title>HTML | DOM Style columnCount Property</title><style>#mainDIV {width: 700px;height: 50%;border: 2px solid green;padding: 10px;}#p1 {column-gap: 50px;column-count: 4;}</style></head><body><divid="mainDIV"><pid="p1"><ustyle="color: green;font-size: 20px;">Welcome to GeeksforGeeks.!</u><br>An operating system acts as an intermediarybetween the user of a computer and computerhardware. The purpose of an operating systemis to provide an environment in which a usercan execute programs in a convenient andefficient manner. An operating system issoftware that manages the computer hardware.The hardware must provide appropriatemechanisms to ensure the correct operationof the computer system and to prevent userprograms from interfering with the properoperation of the system.</p></div><br><inputtype="button"onclick="mainFunction()"value="Submit"/><script>function mainFunction() {// Set columnCount.document.getElementById("p1").style.columnCount = "inherit";}</script></body></html>- Output:
- Before Click:
- After Click:
- Before Click:
- Google Chrome 50 and above
- Edge 12 and above
- Firefox 52 and above
- Internet Explorer 10 and above
- Opera 11.1 and above
- Safari 9 and above
Note: Use MozColumnRule for Mozilla Firefox.
Supported Browsers: The supported browser by HTML | DOM Style columnCount Property
are listed below:
Please Login to comment...