HTML DOM columnRule प्रॉपर्टी का उपयोग columnRule प्रॉपर्टी को प्राप्त करने या सेट करने के लिए किया जाता है। यह कॉलमरूलकलर, कॉलमरूल स्टाइल और कॉलमरूलेविड्थ नामक तीन गुणों में हेरफेर करने के लिए शॉर्टहैंड प्रॉपर्टी है।
−
. के लिए वाक्य रचना निम्नलिखित हैकॉलमरूल प्रॉपर्टी सेट करना -
object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| मान | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| columnRuleWidth | स्तंभों के बीच नियम की चौड़ाई निर्धारित करने के लिए। यह डिफ़ॉल्ट रूप से मध्यम पर सेट है। |
| स्तंभ नियम शैली | FFस्तंभों के बीच नियम शैली सेट करने के लिए। यह डिफ़ॉल्ट रूप से कोई नहीं पर सेट है। |
| स्तंभ नियम रंग | स्तंभों के बीच नियम शैली सेट करने के लिए। यह डिफ़ॉल्ट रूप से कोई नहीं पर सेट है। |
| स्तंभ नियम रंग | कॉलम के बीच नियम का रंग सेट करने के लिए। यह डिफ़ॉल्ट रूप से तत्व रंग मान पर सेट है। |
| प्रारंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य को इनहेरिट करने के लिए। |
आइए कॉलम नियम संपत्ति के लिए एक उदाहरण देखें -
उदाहरण
<!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> आउटपुट
“कॉलम नियम बदलें” . पर क्लिक करने पर बटन -
