HTML - DOM Style Object columnCount Property

Quiz

HTML DOM Style Object columnCount property used to specify the number of columns in which an element shoul be divided into.

Syntax

Set the columnCount property:

object.style.columnCount= "number | auto | initial | inherit";

Get the columnCount property:

object.style.columnCount;

Property Values

Value	Description
number	It specifies number of columns in which element should be divided into.
auto	It is default value which depends on other properties.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents column count property of an element.

Example of HTML DOM Style Object 'columnCount' Property

In the following example we have divided the element into three and four columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnCount Property
    </title>
</head>
<body>
    <button onclick="fun()">Three Column</button>
    <button onclick="funTwo()">Four Column</button>
    <p id="color">
        CSS is the acronym for "Cascading Style Sheet".
        It's a style sheet language used for describing
        the presentation of a document written in a markup
        language like HTML. CSS helps the web developers to
        control the layout and other visual aspects of the
        web pages. CSS plays a crucial role in modern web
        development by providing the tools necessary to create
        visually appealing, accessible, and responsive websites.
    </p>
    <script>
        function fun() {
            document.getElementById("color")
                .style.columnCount = "3";
        }
        function funTwo() {
            document.getElementById("color")
                .style.columnCount = "4";
        }
    </script>
</body>
</html>

Supported Browsers

Property
columnCount	Yes 50	Yes 12	Yes 52	Yes 9	Yes 37

html_dom.htm

Print Page