Skip to content
Related Articles

Related Articles

HTML | DOM Style columnRule Property
  • Last Updated : 31 Jul, 2019

The DOM Style columnRule property sets the width, style, and color of the rule between columns.

    Syntax :

  • To get the columnRule Property
    object.style.columnRule = value
    
  • TO set the columnRule property
    object.style.columnRule = "column-rule-width column-rule-style 
    column-rule-color|initial|inherit"
    
    Property Values:

  • columnRuleWidth: Default value is medium. Sets the width between columns.
  • columnRuleStyle: Sets the style of the rule. “none” is default value.
  • columnRuleColor: Sets the color of the rule. Element color is default value.
  • initial: Sets the default value.
  • inherit: Inherit property from parent element.

Return Value : This will return a String representing the column-rule property of a selected element.

Example-1: columnRuleWidth, columnRuleStyle and columnRuleColor.






<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRule Property
    </title>
    <style>
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
        }
    </style>
</head>
  
<body>
  
    <div id="mainDIV">
        <p id="p1"><u style="color: green ;font-size: 20px;">
         Welcome to GeeksforGeeks.!
         </u>
            <br>
        </p>
         An operating system acts as an intermediary
         between the user of a computer and computer
         hardware. The purpose of an operating system
         is to provide an environment in which a user
         can execute programs in a convenient and 
         efficient manner.
  
           An operating system is a software that manages
           the computer hardware. The hardware must 
           provide appropriate mechanisms to ensure 
           the correct operation of the computer system 
           and to prevent user programs from interfering
           with the proper operation of the system.
         
    </div>
    <br>
    <input type="button" onclick="mainFunction()" 
                                      value="Submit" />
  
    <script>
        function mainFunction() {
            document.getElementById(
            "mainDIV").style.columnRuleWidth = "3px";
            document.getElementById(
            "mainDIV").style.columnRuleStyle = "solid";
            document.getElementById(
            "mainDIV").style.columnRuleColor = "red";
        }
    </script>
  
</body>
  
</html>


Output :
Before Click:

After Click:

Example-2: This sets the property value to its default value of the property. For the initial value rule-style and rule-color will be none and default color.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRule Property
    </title>
    <style>
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 3px;
            column-rule-color: red;
        }
    </style>
</head>
  
<body>
  
    <div id="mainDIV">
        <p id="p1"><u style="color: green ;font-size: 20px;">
        Welcome to GeeksforGeeks.!
        </u>
            <br>
        </p>
         An operating system acts as an intermediary
         between the user of a computer and computer
         hardware. The purpose of an operating system
         is to provide an environment in which a user
         can execute programs in a convenient and 
         efficient manner.
  
           An operating system is a software that manages
           the computer hardware. The hardware must 
           provide appropriate mechanisms to ensure 
           the correct operation of the computer system 
           and to prevent user programs from interfering
           with the proper operation of the system.
         
    </div>
    <br>
    <input type="button" onclick="mainFunction()" 
                                      value="Submit" />
  
    <script>
        function mainFunction() {
            document.getElementById(
            "mainDIV").style.columnRule = "initial";
        }
    </script>
  
</body>
  
</html>


Output :
Before Click:

After Click:

Example-3: Inherits the property from its parent element. Here, by using inherit we can set the different rule-style and rule-color different that it was set.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRule Property
    </title>
    <style>
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 3px;
            column-rule-color: red;
        }
    </style>
</head>
  
<body>
  
    <div id="mainDIV">
        <p id="p1"><u style="color: green ;font-size: 20px;">
        Welcome to GeeksforGeeks.!
        </u>
            <br>
        </p>
         An operating system acts as an intermediary
         between the user of a computer and computer
         hardware. The purpose of an operating system
         is to provide an environment in which a user
         can execute programs in a convenient and 
         efficient manner.
  
           An operating system is software that manages
           the computer hardware. The hardware must 
           provide appropriate mechanisms to ensure 
           the correct operation of the computer system 
           and to prevent user programs from interfering
           with the proper operation of the system.
    </div>
    <br>
    <input type="button" onclick="mainFunction()" 
                                         value="Submit" />
  
    <script>
        function mainFunction() {
            document.getElementById(
            "mainDIV").style.columnRule = "initial";
        }
    </script>
  
</body>
  
</html>


Output :
Before Click:

After Click:

Note: Use MozColumnRule for Mozilla Firefox.

    Supported Browsers: The supported browser by HTML | DOM Style columnRule Property are listed below:

  • Google Chrome
  • Edge
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :