Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

जावास्क्रिप्ट के साथ किसी एलिमेंट को कितने कॉलम में विभाजित किया जाना चाहिए, यह सेट या वापस कैसे करें?


किसी डिव को तीन कॉलम में विभाजित करने के लिए, columnCount प्रॉपर्टी का उपयोग करें। कॉलम काउंट सेट करें और डिव को विभाजित करें।

उदाहरण

जावास्क्रिप्ट के साथ किसी एलिमेंट को कितने कॉलम में विभाजित किया जाना चाहिए, यह वापस करने के लिए निम्न कोड चलाकर देखें:

<!DOCTYPE html> <html>    <body>       <p>नीचे क्लिक करके 4 कॉलम बनाएं</p>       <button onclick="display()">कॉलम</button>       <div id="myID">          यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।          यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।          यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।          यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।          यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।          यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।          यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।       </div>       <script>          function display() {             document.getElementById("myID").style.columnCount = "4";          }       </script>    </body> </html>

  1. - JavaScript से एलिमेंट के सभी मार्जिन्स एक साथ कैसे सेट करें?

    उदाहरण margin शॉर्टहैंड प्रॉपर्टी से चारों मार्जिन एक साथ सेट करें। <!DOCTYPE html> <html> <body> <button type=button onclick=display()>चारों मार्जिन सेट करें</button> <p id=myID>यह डेमो टेक्स्ट है।</p> <script> function display() {

  1. - CSS column-count प्रॉपर्टी से एलिमेंट को कॉलम में विभाजित करें

    CSS column-count प्रॉपर्टी किसी एलिमेंट के कंटेंट को कितने कॉलम (स्तंभों) में विभाजित करना है, यह निर्दिष्ट करती है। यह न्यूजपेपर/मैगजीन स्टाइल लेआउट बनाने के लिए उपयोगी है। उदाहरण नीचे दिए गए उदाहरण में, column-count: 4 का उपयोग करके कंटेंट को 4 कॉलम में विभाजित किया गया है। <!DOCTYPE html>

  1. - CSS column-span प्रॉपर्टी - एलिमेंट को कॉलम में फैलाएं

    column-span प्रॉपर्टी किसी एलिमेंट को मल्टी-कॉलम लेआउट में सभी कॉलम में फैलाने (span) की अनुमति देती है। यह मुख्य रूप से हेडिंग्स के लिए उपयोगी है जो सभी कॉलम में फैलने चाहिए। उदाहरण: हेडिंग को सभी कॉलम में फैलाना column-span: all का उपयोग करके <h1> को सभी 4 कॉलम में फैलाया गया है। <!DOCT