HTML | DOM Style columnRuleWidth Property
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.
html
<!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 = "myBeginner()"> Click Here! </ button > < script > function myBeginner() { 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.
html
<!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 = "myBeginner()"> Click Here! </ button > < script > function myBeginner() { 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
Contact Us