HTML DOM columns प्रॉपर्टी का उपयोग columnWidth और columnCount प्रॉपर्टी में हेरफेर करने के लिए किया जाता है।
सिंटैक्स निम्नलिखित है:
columns प्रॉपर्टी सेट करना:
object.style.columns = "auto|column-width column-count|initial|inherit"
उपरोक्त प्रॉपर्टी मान निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| Auto | यह column-width और column-count को ऑटो पर सेट करता है और यह डिफ़ॉल्ट मान है। |
| columnWidth | कॉलम चौड़ाई निर्दिष्ट करने के लिए। |
| columnCount | कॉलम संख्या निर्दिष्ट करने के लिए। |
| initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए columns प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #DIV1{ columns: 5rem auto; } img { border: 1px solid brown; } </style> <script> function changeColumns(){ document.getElementById("DIV1").style.columns="10px 3"; document.getElementById("Sample").innerHTML="कॉलम अब संशोधित हो गए हैं"; } </script> </head> <body> <div id="DIV1"> <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/home_time_series.png"><br/> <img src="https://www.tutorialspoint.com/images/microsoftproject.png"><br/> </div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div कॉलम प्रॉपर्टी बदलें</p> <button onclick="changeColumns()">कॉलम बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
कॉलम बदलें बटन पर क्लिक करने पर:
