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

HTML DOM Style columnRuleWidth Property


The HTML DOM columnRuleWidth property is used for setting or getting the column rule width.

Following is the syntax for −

Setting the columnRuleWidth property −

object.style.columnRuleWidth = "medium|thin|thick|length|initial|inherit"

The above property values are explained as follows −

Value
Description
thin
Thisspecifies a thin rule.
medium
Thisspecifies the medium rule and is the default value.
thick
Thisspecifies a thin rule.
length
Thisis used for specifying the rule width in length units.
initial
Forsetting this property to initial value.
inherit
Toinherit the parent property value

Let us look at an example for the columnRuleWidth property −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      padding: 5px;
      column-count: 5;
      column-rule-width: 9px;
      column-rule-color: lightblue;
      column-rule-style: solid;
   }
</style>
<script>
   function changeColumnRuleWidth(){
      document.getElementById("DIV1").style.columnRuleWidth="3px";
      document.getElementById("Sample").innerHTML="The column rule width is now reduced";
   }
</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 width by clicking the below button</p>
   <button onclick="changeColumnRuleWidth()">Change Column Rule Width</button>
   <p id="Sample"></p>
</body>
</html>

Output

HTML DOM Style columnRuleWidth Property

On clicking the “Change Column Rule Width” button −

HTML DOM Style columnRuleWidth Property