HTML | DOM Style columnRuleWidth Property

Last Updated : 08 Aug, 2022

The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns.

Syntax:

It returns the columnRuleWidth property.

object.style.columnRuleWidth

It is used to set columnRuleWidth property.

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

Property Values:

thin: It is used to set a thin rule between the columns.
medium: It is used to create a medium width rule between the columns. It is the default width.
thick: It creates a thick width rule between the columns.
length: It is used to set the width by length. It does not takes negative value.
initial: It is used to set columnRuleWidth property to its default value.
inherit: This property is inherited from its parent.

Return Value: It returns a string that represents the column-rule-width property of the element.

Example 1: This example describes the length property value.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        HTML | DOM Style columnRuleWidth Property
    </title>
    <style>
        #GFG {
            
            /* For old Chrome and Safari browsers */
            -webkit-column-count:4;
            -webkit-column-rule: 1px green solid;
            
            /* For Firefox browser */
            -moz-column-count:4;
            -moz-column-rule: 1px green solid;
            
            -webkit-column-count:4;
            -webkit-column-rule: 1px green solid;
            text-align:justify;
        }
    </style>
</head>

<body>
    <div id = "GFG">
        Prepare for the Recruitment drive of product 
        based companies like Microsoft, Amazon, Adobe 
        etc with a free online placement preparation 
        course. The course focuses on various MCQ's  
        & Coding question likely to be asked in the  
        interviews & make your upcoming placement 
        season efficient and successful. 
    </div>

    <p>
        Click on the button to change the
        column-rule width
    </p>

    <button onclick = "myGeeks()">
        Click Here!
    </button>

    <script>
        function myGeeks() {
            document.getElementById("GFG").style.columnRuleWidth
                    = "10px";
        }
    </script>
</body>

</html>

Output:

Before Click on the button:

After Click on the button:

Example 2: This example describes medium property value.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        HTML | DOM Style columnRuleWidth Property
    </title>
    <style>
        #GFG {
            
            /* For old Chrome and Safari browsers */
            -webkit-column-count:4;
            -webkit-column-rule: 1px green solid;
            
            /* For Firefox browser */
            -moz-column-count:4;
            -moz-column-rule: 1px green solid;
            
            -webkit-column-count:4;
            -webkit-column-rule: 1px green solid;
            text-align:justify;
        }
    </style>
</head>

<body>
    <div id = "GFG">
        Prepare for the Recruitment drive of product 
        based companies like Microsoft, Amazon, Adobe 
        etc with a free online placement preparation 
        course. The course focuses on various MCQ's  
        & Coding question likely to be asked in the  
        interviews & make your upcoming placement 
        season efficient and successful. 
    </div>

    <p>
        Click on the button to change the
        column-rule width
    </p>

    <button onclick = "myGeeks()">
        Click Here!
    </button>

    <script>
        function myGeeks() {
            document.getElementById("GFG").style.columnRuleWidth
                    = "medium";
        }
    </script>
</body>

</html>

Output:

Before Click on the button:

After Click on the button:

Supported Browsers: The browser supported by DOM Style columnRuleStyle property are listed below:

Google Chrome 50 and above
Edge 12 and above
Firefox 52 and above
Internet Explorer 10 and above
Opera 11.1 and above
Apple Safari 9 and above

HTML DOM adoptNode() Method

EnaMotwani

Improve

Article Tags :

HTML | DOM Style columnRuleWidth Property

Similar Reads

Thank You!

What kind of Experience do you want to share?