HTML - DOM Style Object columnWidth Property

Quiz

HTML DOM Style Object columnWidth property is used to set or get width of the columns.

Syntax

Set the columnWidth property:

object.style.columnWidth= "auto | length | initial | inherit";

Get the columnWidth property:

object.style.columnWidth;

Property Values

Value	Description
auto	It is the default value browser determines the column width.
length	It specifies the width of 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 width property of an element.

Example of HTML DOM Style Object 'columnWidth' Property

In the following example the paragraph is broken into columns according to mentioned width of the column.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnWidth Property
    </title>
</head>
<body>
    <button onclick="fun()">Change</button>
    <br><br>
    <p id="width">
        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("width")
                .style.columnWidth = "150px";
        }
    </script>
</body>
</html>

Supported Browsers

Property
columnWidth	Yes 50	Yes 12	Yes 50	Yes 9	Yes 11.1

html_dom.htm

Print Page