HTML DOM Style columnRuleStyle प्रॉपर्टी का उपयोग कॉलम नियम की शैली को परिभाषित या प्राप्त करने के लिए किया जाता है।
सिंटैक्स निम्नलिखित है:
columnRuleStyle प्रॉपर्टी सेट करना:
object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset| initial|inherit"
उपरोक्त प्रॉपर्टी मान निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| none | यह डिफ़ॉल्ट मान है जो बिना नियम को निर्दिष्ट करता है। |
| hidden | यह "none" के समान है लेकिन फिर भी नियम स्थान लेगा। यह मूल रूप से पारदर्शी है लेकिन फिर भी मौजूद है। |
| dotted | यह एक डॉटेड नियम को परिभाषित करता है। |
| dashed | यह एक डैश्ड नियम को परिभाषित करता है। |
| solid | यह एक सॉलिड नियम को परिभाषित करता है। |
| double | यह एक डबल नियम को परिभाषित करता है। |
| groove | यह एक 3D ग्रूव नियम को परिभाषित करता है और रिज के विपरीत है। |
| ridge | यह एक 3D रिज्ड नियम को परिभाषित करता है और ग्रूव के विपरीत है। |
| inset | यह एक 3D नियम बॉर्डर को परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह एम्बेडेड है। यह आउटसेट के विपरीत प्रभाव पैदा करता है। |
आइए columnRuleStyle प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!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 changeColumnRuleStyle(){ document.getElementById("DIV1").style.columnRuleStyle="dashed"; 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="changeColumnRuleStyle()">कॉलम नियम शैली बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
कॉलम नियम शैली बदलें बटन पर क्लिक करने पर:
