The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns.
Syntax:
- It returns the columnRuleWidth property.
object.style.columnRuleWidth
- It is used to set columnRuleWidth property.
object.style.columnRuleWidth = "medium|thin|thick|length| initial|inherit"
Property Values:
- thin: It is used to set a thin rule between the columns.
- medium: It is used to create a medium width rule between the columns. It is the default width.
- thick: It creates a thick width rule between the columns.
- length: It is used to set the width by length. It does not takes negative value.
- initial: It is used to set columnRuleWidth property to its default value.
- inherit: This property is inherited from its parent.
Return Value: It returns a string that represents the column-rule-width property of the element.
Example 1: This example describes the length property value.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style columnRuleWidth Property
</title>
<style>
#GFG {
/* For old Chrome and Safari browsers */
-webkit-column-count:4;
-webkit-column-rule: 1px green solid;
/* For Firefox browser */
-moz-column-count:4;
-moz-column-rule: 1px green solid;
-webkit-column-count:4;
-webkit-column-rule: 1px green solid;
text-align:justify;
}
</style>
</head>
<body>
<div id = "GFG">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<p>
Click on the button to change the
column-rule width
</p>
<button onclick = "myGeeks()">
Click Here!
</button>
<script>
function myGeeks() {
document.getElementById("GFG").style.columnRuleWidth
= "10px";
}
</script>
</body>
</html>
Output:
Before Click on the button:
After Click on the button:
Example 2: This example describes medium property value.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style columnRuleWidth Property
</title>
<style>
#GFG {
/* For old Chrome and Safari browsers */
-webkit-column-count:4;
-webkit-column-rule: 1px green solid;
/* For Firefox browser */
-moz-column-count:4;
-moz-column-rule: 1px green solid;
-webkit-column-count:4;
-webkit-column-rule: 1px green solid;
text-align:justify;
}
</style>
</head>
<body>
<div id = "GFG">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<p>
Click on the button to change the
column-rule width
</p>
<button onclick = "myGeeks()">
Click Here!
</button>
<script>
function myGeeks() {
document.getElementById("GFG").style.columnRuleWidth
= "medium";
}
</script>
</body>
</html>
Output:
Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by DOM Style columnRuleStyle property are listed below:
- Google Chrome 50 and above
- Edge 12 and above
- Firefox 52 and above
- Internet Explorer 10 and above
- Opera 11.1 and above
- Apple Safari 9 and above
