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

HTML DOM Style columnGap प्रॉपर्टी का उपयोग किसी तत्व के कॉलम के बीच की जगह को निर्दिष्ट करने के लिए किया जाता है।

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

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

object.style.columnGap = "length|normal|initial|inherit"

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

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

उदाहरण

<!DOCTYPE html> <html> <head> <style>    div {       column-count: 4;       column-gap: 50px;       font-size: 1.2rem;    } </style> <script>    function changeColumnGap(){       document.getElementsByTagName("div")[0].style.columnGap="10px";       document.getElementById("Sample").innerHTML="कॉलम गैप अब घट गया है";    } </script> </head> <body>    <div>       यह div के अंदर कुछ नमूना टेक्स्ट है। यह दूसरी div लाइन है। यह तीसरी div लाइन है। यह चौथी div लाइन है। यह पांचवीं div लाइन है। यह छठी div लाइन है।       यह सातवीं div लाइन है। यह आठवीं div लाइन है। यह नौवीं div लाइन है। यह       दसवीं div लाइन है। यह ग्यारहवीं div लाइन है। यह बारहवीं div लाइन है। यह  तेरहवीं div लाइन है। यह चौदहवीं लाइन है। यह पंद्रहवीं div लाइन है। यह सोलहवीं div लाइन है। यह सत्रहवीं div लाइन है। यह अठारहवीं div लाइन है।    </div>    <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div कॉलम गैप बदलें</p>    <button onclick="changeColumnGap()">कॉलम गैप बदलें</button>    <p id="Sample"></p> </body> </html>

आउटपुट

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