HTML - DOM Style Object columnSpan Property

Quiz

HTML DOM Style Object columnSpan property is used to define the number of columns on which an element should span across.

Syntax

Set the columnSpan property:

object.style.columnSpan= "1 | all | initial | inherit";

Get the columnSpan property:

object.style.columnSpan;

Property Values

Value	Description
1	It is the default value which specifies element to span one column.
all	It specifies element to span across all columns.
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 span property of an element.

Example of HTML DOM Style Object 'columnSpan' Property

In the following example h2 element is spanned over all the columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnSpan Property
    </title>
    <style>
        #color {
            column-count: 3;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Click</button>
    <div id="color">
    <h2 id="colspan">
        HTML DOM Style Object columnSpan Property  With
        Column Count 3 Spanning Over all Column
    </h2>
    <p >
        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>
    </div>
    <script>
        function fun() {
            document.getElementById("colspan")
                .style.columnSpan = "all";
        }
    </script>
</body>
</html>

Supported Browsers

Property
columnSpan	Yes 50	Yes 12	Yes 71	Yes 9	Yes 37

html_dom.htm

Print Page