Open In App

HTML | DOM Style columnRuleWidth Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads