HTML DOM columnRuleColor प्रॉपर्टी का इस्तेमाल कॉलम के बीच रूल कलर को सेट करने या वापस करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैcolumnRuleColor प्रॉपर्टी सेट करना -
object.style.columnRuleColor = "color|initial|inherit"
यहां, रंग नियम के रंग को निर्दिष्ट करता है। प्रारंभिक मान को डिफ़ॉल्ट मान पर सेट करता है और इनहेरिट इसे मूल संपत्ति मान पर सेट करता है।
आइए हम columnRuleColor प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding: 5px;
column-count: 5;
column-rule-width: 9px;
column-rule-style: solid;
column-rule-color: lightcoral;
}
</style>
<script>
function changeColumnRuleColor(){
document.getElementById("DIV1").style.columnRuleColor="blue";
document.getElementById("Sample").innerHTML="The column rule color is now changed";
}
</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">
<img src="https://www.tutorialspoint.com/images/QlikView.png"><br/>
<img src="https://www.tutorialspoint.com/images/hadoop.png">
</div>
<p>Change the above div column rule color by clicking the below button</p>
<button onclick="changeColumnRuleColor()">Change Column Rule Color</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“कॉलम नियम का रंग बदलें” . पर क्लिक करने पर बटन -
