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:
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 >GeeksforGeeks</ 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 = "myGeeks()"
value = "Submit" />
< script >
function myGeeks() {
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 >GeeksforGeeks</ 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 = "myGeeks()"
value = "Submit" />
< script >
function myGeeks() {
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 >GeeksforGeeks</ 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 = "myGeeks()"
value = "Submit" />
< script >
function myGeeks() {
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
Last Updated :
29 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...