Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style columnCount Property
The HTML DOM Style columnCount property is used to set the number of columns an element is to be divided.
Following is the syntax for −
Setting the columnCount property −
object.style.columnCount = "number|auto|initial|inherit"
The above properties are explained as follows:
| Value | Description |
|---|---|
| Number | For setting the number of columns into which the content of the element will be divided. |
| Auto | The number of colums are determined by other properties e.g. “column-width” .This is the default property value. |
| Initial | For setting this property to initial value. |
| Inherit | To inherit the parent property value |
Let us look at an example for the columnCount property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 120px;
column-count: 2;
border: 2px solid black;
background-color: mediumvioletred;
}
div > div {
background-color: yellow;
}
</style>
<script>
function changeColumnCount(){
document.getElementsByTagName("div")[0].style.columnCount="4";
document.getElementById("Sample").innerHTML="The column count is now increased to 4";
}
</script>
</head>
<body>
<div id="DIV1">
<div></div>
</div>
<p>Change the above div column count property by clicking the below button</p>
<button onclick="changeColumnCount()">Change Column Count</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Column Count” button −
Updated on: 23-Oct-2019
36 Views
Advertisements