HTML - DOM Style Object columnRuleWidth Property

Quiz

HTML DOM Style Object columnRuleWidth property is used to set or get the rule width between the columns.

Syntax

Set the columnRuleWidth property:

object.style.columnRuleWidth= "medium | thin | thick | length| initial | inherit";

Get the columnRuleWidth property:

object.style.columnRuleWidth;

Property Values

Value	Description
thin	It specifies a thin rule between columns.
medium	It is default value which specifies a medium rule between columns.
thick	It specifies a thick rule between columns.
length	It sets rule between columns in CSS measurement units like px.
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 rule width property of an element.

Example of HTML DOM Style Object 'columnRuleWidth' Property

The following example sets different value for column rule width.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleWidth Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to change the rule width.</p>
    <button onclick="fun()">Thin</button>
    <button onclick="funtwo()">Medium</button>
    <button onclick="funthree()">Thick </button>
    <button onclick="funfour()">Change Length</button>
    <p id="rule">
        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("rule")
                .style.columnRuleWidth = "thin";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleWidth = "medium";
        }
        function funthree() {
            document.getElementById("rule")
                .style.columnRuleWidth = "thick";
        }
        function funfour() {
            document.getElementById("rule")
                .style.columnRuleWidth = "10px";
        }
    </script>
</body>
</html>

Supported Browsers

Property
columnRuleWidth	Yes 50	Yes 12	Yes 52	Yes 9	Yes 11.1

html_dom.htm

Print Page