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

HTML DOM columnRuleWidth प्रॉपर्टी का उपयोग कॉलम नियम की चौड़ाई को सेट या प्राप्त करने के लिए किया जाता है।

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

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

object.style.columnRuleWidth = "medium|thin|thick|length|initial|inherit"

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

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

उदाहरण

<!DOCTYPE html> <html> <head> <style>    #DIV1{       padding: 5px;       column-count: 5;       column-rule-width: 9px;       column-rule-color: lightblue;       column-rule-style: solid;    } </style> <script>    function changeColumnRuleWidth(){       document.getElementById("DIV1").style.columnRuleWidth="3px";       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">       <img src="https://www.tutorialspoint.com/images/QlikView.png"><br/>       <img src="https://www.tutorialspoint.com/images/hadoop.png">    </div>    <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div कॉलम नियम चौड़ाई बदलें</p>    <button onclick="changeColumnRuleWidth()">कॉलम नियम चौड़ाई बदलें</button>    <p id="Sample"></p> </body> </html>

आउटपुट

कॉलम नियम चौड़ाई बदलें बटन पर क्लिक करने पर: