Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Style columnRuleColor Property


The HTML DOM columnRuleColor property is used for setting or returning the rule color between columns.

Following is the syntax for −

Setting the columnRuleColor property −

object.style.columnRuleColor = "color|initial|inherit"

Here, color specifies the color of the rule. Initial sets the value to default value and inherit sets it to parent property value.

Let us look at an example for the columnRuleColor property −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      padding: 5px;
      column-count: 5;
      column-rule-width: 9px;
      column-rule-style: solid;
      column-rule-color: lightcoral;
   }
</style>
<script>
   function changeColumnRuleColor(){
      document.getElementById("DIV1").style.columnRuleColor="blue";
      document.getElementById("Sample").innerHTML="The column rule color is now changed";
   }
</script>
</head>
<body>
   <div id="DIV1">
      <img src="https://www.tutorialspoint.com/images/Swift.png"><br/>
      <img src="https://www.tutorialspoint.com/images/xamarian.png"><br/>
      <img src="https://www.tutorialspoint.com/images/pl-sql.png"><br/>
      <img src="https://www.tutorialspoint.com/images/asp-net.png"><br/>
      <img src="https://www.tutorialspoint.com/images/powerbi.png"><br/>
      <img src="https://www.tutorialspoint.com/images/Tableau.png"><br/>
      <img src="https://www.tutorialspoint.com/images/Big-Data-Analytics.png"><br/>
      <img src="https://www.tutorialspoint.com/images/microsoftproject.png">
      <img src="https://www.tutorialspoint.com/images/QlikView.png"><br/>
      <img src="https://www.tutorialspoint.com/images/hadoop.png">
   </div>
   <p>Change the above div column rule color by clicking the below button</p>
   <button onclick="changeColumnRuleColor()">Change Column Rule Color</button>
   <p id="Sample"></p>
</body>
</html>

Output

HTML DOM Style columnRuleColor Property

On clicking the “Change Column Rule Color” button −

HTML DOM Style columnRuleColor Property