HTML DOM Style columnRule प्रॉपर्टी

HTML DOM columnRule प्रॉपर्टी का उपयोग columnRule प्रॉपर्टी को प्राप्त या सेट करने के लिए किया जाता है। यह तीन प्रॉपर्टी नामतः columnRuleColor, columnRuleStyle और columnRuleWidth में हेरफेर करने के लिए एक शॉर्टहैंड प्रॉपर्टी है।

सिंटैक्स निम्नलिखित है:

columnRule प्रॉपर्टी सेट करना:

object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"

उपरोक्त प्रॉपर्टी निम्नलिखित हैं:

आइए columnRule प्रॉपर्टी के लिए एक उदाहरण देखें:

उदाहरण

<!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="कॉलम नियम प्रॉपर्टी अब संशोधित हो गई हैं";    } </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>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div कॉलम नियम प्रॉपर्टी बदलें</p>    <button onclick="changeColumnRule()">कॉलम नियम बदलें</button>    <p id="Sample"></p> </body> </html>

आउटपुट

कॉलम नियम बदलें बटन पर क्लिक करने पर: