Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style columnRule Property
The HTML DOM columnRule property is used for getting or setting the columnRule property. It is the shorthand property for manipulating three properties namedcolumnRuleColor, columnRuleStyle and columnRuleWidth.
Following is the syntax for −
Setting the columnRule property −
object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| columnRuleWidth | For setting the rule width between columns. It is set to medium by default. |
| columnRuleStyle | FFor setting the rule style between columns. It is set to none by default. |
| columnRuleColor | For setting the rule style between columns. It is set to none by default. |
| columnRuleColor | For setting the rule color between columns. It is set to the element color value by default. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value. |
Let us look at an example for the columnRule property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
column-count: 4;
column-rule: 4px dashed darkolivegreen;
}
</style>
<script>
function changeColumnRule(){
document.getElementById("DIV1").style.columnRule="10px solid red";
document.getElementById("Sample").innerHTML="The column rule properties are now modified";
}
</script>
</head>
<body>
<div id="DIV1">
<img src="https://www.tutorialspoint.com/images/Swift.png"><br/>
<img src="https://www.tutorialspoint.com/images/xamarian.png"><br/>
<img src="https://www.tutorialspoint.com/images/pl-sql.png"><br/>
<img src="https://www.tutorialspoint.com/images/asp-net.png"><br/>
<img src="https://www.tutorialspoint.com/images/powerbi.png"><br/>
<img src="https://www.tutorialspoint.com/images/Tableau.png"><br/>
<img src="https://www.tutorialspoint.com/images/Big-Data-Analytics.png"><br/>
<img src="https://www.tutorialspoint.com/images/microsoftproject.png">
</div>
<p>Change the above div column rule properties by clicking the below button</p>
<button onclick="changeColumnRule()">Change Column Rule</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Column Rule” button −
Updated on: 23-Oct-2019
26 Views
Advertisements