HTML | DOM Style columnRuleColor Property
The DOM Style columnRuleColor property specifies the color of the rule between columns.
Syntax :
- For set the columnRuleColor property:
object.style.columnRuleColor = "color|initial|inherit"
- For return the columnRuleColor property:
object.style.columnRuleColor
Property Values:
- color: Used to specify the color of the rule.
- initial: Used to set the default value.
- inherit: Used to inherit property from parent element.
Return Value : This return a single string that representing the column-rule-color property of an element.
-
Color: This specifies the color of the rule.
Example-1:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
HTML | DOM Style columnRuleColor Property
</
title
>
<
style
>
#myDIV {
width: 90%;
height: 70%;
border: 2px solid green;
padding: 10px;
column-count: 3;
column-rule: 3px outset red;
}
#p1 {
font-size: 20px;
color: green;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
>
<
p
id
=
"p1"
>
<
u
>Welcome to w3wiki.!</
u
>
</
p
>
<
p
>
Computer Science is the study of
computers and computational systems.
Unlike electrical and computer engineers,
computer scientists deal mostly with
software and software systems; this
includes their theory, design, development,
and application. Principal areas of study
within Computer Science include artificial
intelligence, computer systems and networks,
security, database systems, human computer
interaction, vision and graphics, numerical
analysis, programming languages, software
engineering, bioinformatics and theory of
computing. Although knowing how to program
is essential to the study of computer science,
it is only one element of the field. Computer
scientists design and analyze algorithms to
solve programs and study the performance of
computer hardware and software. The problems
that computer scientists encounter range from
the abstract-- determining what problems can
be solved with computers and the complexity
of the algorithms that solve them – to the
tangible – designing applications that
perform well on handheld devices, that
are easy to use, and that uphold security
measures.
</
div
>
<
br
>
<
input
type
=
"button"
onclick
=
"mainFunction()"
value
=
"Submit"
/>
<
script
>
function mainFunction() {
document.getElementById(
// Define color.
"myDIV").style.columnRuleColor =
"green";
}
</
script
>
</
body
>
</
html
>
Output :
Before click:
After Click:
- initial: This set the color of the rule to the “initial”. By default it is black.
Example-2:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
HTML | DOM Style columnRuleColor Property
</
title
>
<
style
>
#myDIV {
width: 90%;
height: 70%;
border: 2px solid green;
padding: 10px;
column-count: 3;
column-rule: 3px outset red;
}
#p1 {
font-size: 20px;
color: green;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
>
<
p
id
=
"p1"
>
<
u
>Welcome to w3wiki.!</
u
>
</
p
>
<
p
>
Computer Science is the study of
computers and c omputational systems.
Unlike electrical and computer engineers,
computer scientists deal mostly with
software and software systems; this
includes their theory, design, development,
and application. Principal areas of study
within Computer Science include artificial
intelligence, computer systems and networks,
security, database systems, human computer
interaction, vision and graphics, numerical
analysis, programming languages, software
engineering, bioinformatics and theory of
computing. Although knowing how to program
is essential to the study of computer science,
it is only one element of the field. Computer
scientists design and analyze algorithms to
solve programs and study the performance of
computer hardware and software. The problems
that computer scientists encounter range from
the abstract-- determining what problems can
be solved with computers and the complexity
of the algorithms that solve them – to the
tangible – designing applications that perform
well on handheld devices, that are easy to use,
and that uphold security measures.
</
p
>
</
div
>
<
br
>
<
input
type
=
"button"
onclick
=
"mainFunction()"
value
=
"Submit"
/>
<
script
>
function mainFunction() {
// Set column color.
document.getElementById(
"myDIV").style.columnRuleColor =
"initial";
}
</
script
>
</
body
>
</
html
>
Output:
Before click:
After Click:
- inherit: This inherits this property from its parent element. This mean that this will make the same color as of the color of the parent element.
Example-1:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
HTML | DOM Style columnRuleColor Property
</
title
>
<
style
>
#myDIV {
width: 90%;
height: 70%;
border: 2px solid green;
padding: 10px;
color: red;
column-count: 3;
column-rule: 3px solid green;
}
#p1 {
font-size: 20px;
color: green;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
>
<
p
id
=
"p1"
>
<
u
>Welcome to w3wiki.!</
u
>
</
p
>
<
p
>
Computer Science is the study of
computers and c omputational systems.
Unlike electrical and computer engineers,
computer scientists deal mostly with
software and software systems; this
includes their theory, design, development,
and application. Principal areas of study
within Computer Science include artificial
intelligence, computer systems and networks,
security, database systems, human computer
interaction, vision and graphics, numerical
analysis, programming languages, software
engineering, bioinformatics and theory of
computing. Although knowing how to program
is essential to the study of computer science,
it is only one element of the field. Computer
scientists design and analyze algorithms to
solve programs and study the performance of
computer hardware and software. The problems
that computer scientists encounter range from
the abstract-- determining what problems can
be solved with computers and the complexity
of the algorithms that solve them – to the
tangible – designing applications that perform
well on handheld devices, that are easy to use,
and that uphold security measures.
</
p
>
</
div
>
<
br
>
<
input
type
=
"button"
onclick
=
"mainFunction()"
value
=
"Submit"
/>
<
script
>
function mainFunction() {
// Set color using inherit.
document.getElementById(
"myDIV").style.columnRuleColor =
"inherit";
}
</
script
>
</
body
>
</
html
>
Output:
Before click:
After Click:
- Google Chrome 50 and above
- Edge 12 and above
- Firefox 52 and above
- Internet Explorer 10 and above
- Safari 9 and above
- Opera 11.1 and above
Supported Browsers: The browser supported by HTML | DOM Style columnRuleColor Property are listed below: