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
On clicking the “Change Column Rule Width” button −