HTML | DOM Style columnRuleWidth Property

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                

chevron_right


Output:
Before Click on the button:

After Click on the button:

Example 2: This example describes medium property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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
  • Firefox use MozColumnRuleWidth
  • Internet Explorer
  • Opera
  • Apple Safari

full-stack-img




My Personal Notes arrow_drop_up

Recommended Posts:

    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.