HTML DOM Style columnRule Property
The Style columnRule property in HTML DOM sets or returns the width, style, and color of the rule between the columns.
- To get the columnRule Property
object.style.columnRule = value
- TO set the columnRule property
object.style.columnRule = "column-rule-width column-rule-style
column-rule-color | initial | inherit"
Property Values:
Property Value |
Description |
---|---|
columnRuleWidth |
Default value is medium. Sets the width between columns. |
columnRuleStyle |
Sets the style of the rule. “none” is default value. |
columnRuleColor |
Sets the color of the rule. Element color is default value. |
initial |
Sets the default value. |
inherit |
Inherit property from parent element. |
Return Value: It will return a String representing the column-rule property of a selected element.
Example 1: Set the columnRuleWidth, columnRuleStyle and columnRuleColor using columnRule property.
html
<!DOCTYPE html> < html > < head > < title > HTML DOM Style columnRule Property </ title > < style > body { text-align: center; } #GFG { width: 80%; height: 50%; border: 2px solid green; padding: 10px; column-count: 3; margin: auto; text-align: justify; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >HTML DOM Style columnRule Property</ h3 > < div id = "GFG" > An operating system acts as an intermediary between the user of a computer and computer hardware. The purpose of an operating system is to provide an environment in which a user can execute programs in a convenient and efficient manner. An operating system is a software that manages the computer hardware. The hardware must provide appropriate mechanisms to ensure the correct operation of the computer system and to prevent user programs from interfering with the proper operation of the system. </ div >< br > < input type = "button" onclick = "myBeginner()" value = "Submit" /> < script > function myBeginner() { document.getElementById("GFG") .style.columnRuleWidth = "3px"; document.getElementById("GFG") .style.columnRuleStyle = "solid"; document.getElementById("GFG") .style.columnRuleColor = "red"; } </ script > </ body > </ html > |
Output:
Example 2: This sets the property value to its default value of the property. For the initial value rule-style and rule-color will be none and default color.
html
<!DOCTYPE html> < html > < head > < title > HTML DOM Style columnRule Property </ title > < style > body { text-align: center; } #GFG { width: 80%; height: 50%; border: 2px solid green; padding: 10px; column-count: 3; column-rule-style: solid; column-rule-width: 3px; column-rule-color: red; margin: auto; text-align: justify; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >HTML DOM Style columnRule Property</ h3 > < div id = "GFG" > An operating system acts as an intermediary between the user of a computer and computer hardware. The purpose of an operating system is to provide an environment in which a user can execute programs in a convenient and efficient manner. An operating system is a software that manages the computer hardware. The hardware must provide appropriate mechanisms to ensure the correct operation of the computer system and to prevent user programs from interfering with the proper operation of the system. </ div >< br > < input type = "button" onclick = "myBeginner()" value = "Submit" /> < script > function myBeginner() { document.getElementById("GFG") .style.columnRule = "initial"; } </ script > </ body > </ html > |
Output:
Example 3: Inherits the property from its parent element. Here, by using inherit we can set the different rule-style and rule-color different that it was set.
html
<!DOCTYPE html> < html > < head > < title > HTML DOM Style columnRule Property </ title > < style > body { text-align: center; } #GFG { width: 80%; height: 50%; border: 2px solid green; padding: 10px; column-count: 3; column-rule-style: solid; column-rule-width: 3px; column-rule-color: red; margin: auto; text-align: justify; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >HTML DOM Style columnRule Property</ h3 > < div id = "GFG" > An operating system acts as an intermediary between the user of a computer and computer hardware. The purpose of an operating system is to provide an environment in which a user can execute programs in a convenient and efficient manner. An operating system is a software that manages the computer hardware. The hardware must provide appropriate mechanisms to ensure the correct operation of the computer system and to prevent user programs from interfering with the proper operation of the system. </ div >< br > < input type = "button" onclick = "myBeginner()" value = "Submit" /> < script > function myBeginner() { document.getElementById("GFG") .style.columnRule = "inherit"; } </ script > </ body > </ html > |
Output:
Note: Use MozColumnRule for Mozilla Firefox.
Supported Browsers:
- Google Chrome 50
- Edge 12
- Firefox 52
- Opera 11.1
- Safari 9
Contact Us