Open In App

HTML | DOM Style columnRuleColor Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Style columnRuleColor property specifies the color of the rule between columns.

Syntax :

  • For set the columnRuleColor property:
    object.style.columnRuleColor = "color|initial|inherit"
    
  • For return the columnRuleColor property:
    object.style.columnRuleColor
    

Property Values:

  • color: Used to specify the color of the rule.
  • initial: Used to set the default value.
  • inherit: Used to inherit property from parent element.

Return Value : This return a single string that representing the column-rule-color property of an element.

  1. Color: This specifies the color of the rule.
    Example-1:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style columnRuleColor Property
        </title>
        <style>
            #myDIV {
                width: 90%;
                height: 70%;
                border: 2px solid green;
                padding: 10px;
                column-count: 3;
                column-rule: 3px outset red;
            }
              
            #p1 {
                font-size: 20px;
                color: green;
            }
        </style>
    </head>
      
    <body>
      
        <div id="myDIV">
            <p id="p1">
              <u>Welcome to GeeksforGeeks.!</u>
            </p>
      
            <p>
              Computer Science is the study of 
              computers and computational systems. 
              Unlike electrical and computer engineers,
              computer scientists deal mostly with 
              software and software systems; this 
              includes their theory, design, development,
              and application. Principal areas of study 
              within Computer Science include artificial
              intelligence, computer systems and networks,
              security, database systems, human computer 
              interaction, vision and graphics, numerical
              analysis, programming languages, software 
              engineering, bioinformatics and theory of
              computing. Although knowing how to program
              is essential to the study of computer science,
              it is only one element of the field. Computer
              scientists design and analyze algorithms to 
              solve programs and study the performance of 
              computer hardware and software. The problems
              that computer scientists encounter range from
              the abstract-- determining what problems can 
              be solved with computers and the complexity 
              of the algorithms that solve them – to the 
              tangible – designing applications that 
              perform well on handheld devices, that 
              are easy to use, and that uphold security
              measures.
        </div>
        <br>
      
        <input type="button" onclick="mainFunction()" 
                                           value="Submit" />
      
        <script>
            function mainFunction() {
      
                document.getElementById(
      
                        //  Define color.
                        "myDIV").style.columnRuleColor =
                    "green";
            }
        </script>
      
    </body>
      
    </html>

    
    

    Output :

    Before click:

    After Click:

  2. initial: This set the color of the rule to the “initial”. By default it is black.
    Example-2:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style columnRuleColor Property
        </title>
        <style>
            #myDIV {
                width: 90%;
                height: 70%;
                border: 2px solid green;
                padding: 10px;
                column-count: 3;
                column-rule: 3px outset red;
            }
              
            #p1 {
                font-size: 20px;
                color: green;
            }
        </style>
    </head>
      
    <body>
      
        <div id="myDIV">
            <p id="p1">
              <u>Welcome to GeeksforGeeks.!</u>
            </p>
      
            <p>
              Computer Science is the study of 
              computers and c omputational systems.
              Unlike electrical and computer engineers,
              computer scientists deal mostly with 
              software and software systems; this 
              includes their theory, design, development,
              and application. Principal areas of study 
              within Computer Science include artificial
              intelligence, computer systems and networks,
              security, database systems, human computer 
              interaction, vision and graphics, numerical
              analysis, programming languages, software 
              engineering, bioinformatics and theory of 
              computing. Although knowing how to program
              is essential to the study of computer science,
              it is only one element of the field. Computer
              scientists design and analyze algorithms to 
              solve programs and study the performance of 
              computer hardware and software. The problems
              that computer scientists encounter range from
              the abstract-- determining what problems can 
              be solved with computers and the complexity 
              of the algorithms that solve them – to the 
              tangible – designing applications that perform
              well on handheld devices, that are easy to use,
              and that uphold security measures.
          </p>
        </div>
        <br>
      
        <input type="button" onclick="mainFunction()" 
                                           value="Submit" />
        <script>
            function mainFunction() {
      
                //  Set column color.
                document.getElementById(
                        "myDIV").style.columnRuleColor =
                    "initial";
            }
        </script>
      
    </body>
      
    </html>

    
    

    Output:

    Before click:

    After Click:

  3. inherit: This inherits this property from its parent element. This mean that this will make the same color as of the color of the parent element.
    Example-1:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style columnRuleColor Property
        </title>
        <style>
            #myDIV {
                width: 90%;
                height: 70%;
                border: 2px solid green;
                padding: 10px;
                color: red;
                column-count: 3;
                column-rule: 3px solid green;
            }
              
            #p1 {
                font-size: 20px;
                color: green;
            }
        </style>
    </head>
      
    <body>
      
        <div id="myDIV">
            <p id="p1">
              <u>Welcome to GeeksforGeeks.!</u>
            </p>
      
            <p>
              Computer Science is the study of 
              computers and c omputational systems.
              Unlike electrical and computer engineers,
              computer scientists deal mostly with 
              software and software systems; this 
              includes their theory, design, development,
              and application. Principal areas of study 
              within Computer Science include artificial
              intelligence, computer systems and networks,
              security, database systems, human computer 
              interaction, vision and graphics, numerical
              analysis, programming languages, software 
              engineering, bioinformatics and theory of 
              computing. Although knowing how to program
              is essential to the study of computer science,
              it is only one element of the field. Computer
              scientists design and analyze algorithms to 
              solve programs and study the performance of 
              computer hardware and software. The problems
              that computer scientists encounter range from
              the abstract-- determining what problems can 
              be solved with computers and the complexity 
              of the algorithms that solve them – to the 
              tangible – designing applications that perform
              well on handheld devices, that are easy to use,
              and that uphold security measures.
          </p>    
        </div>
        <br>
        <input type="button" onclick="mainFunction()" 
                                             value="Submit" />
        <script>
            function mainFunction() {
      
                //  Set color using inherit.
                document.getElementById(
                        "myDIV").style.columnRuleColor =
                    "inherit";
            }
        </script>
      
    </body>
      
    </html>

    
    

    Output:

    Before click:

    After Click:

  4. Supported Browsers: The browser supported by HTML | DOM Style columnRuleColor Property are listed below:

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


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