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

JavaScript से एलिमेंट को कितने कॉलम तक फैलाना है, कैसे सेट करें?

उदाहरण

columnSpan प्रॉपर्टी से किसी एलिमेंट को सभी कॉलम में फैलाएं (all मान)।

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myID { column-count: 4; }
    </style>
  </head>
  <body>
    <p>नोट: columnSpan प्रॉपर्टी Firefox में काम नहीं करती।</p>
    <button onclick="display()">कॉलम फैलाएं</button>
    <div id="myID">
      <h1 id="h1ID">डेमो के लिए हेडिंग लेवल 1</h1>
      यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
      यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
      यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
      यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
      यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
      यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    </div>
    <script>
      function display() {
        document.getElementById("h1ID").style.columnSpan = "all";
      }
    </script>
  </body>
</html>

मान: none (डिफ़ॉल्ट), all। Firefox में समर्थन नहीं है।

  1. - JavaScript से एलिमेंट का क्षैतिज अलाइनमेंट कैसे सेट करें?

    उदाहरण cssFloat प्रॉपर्टी से एलिमेंट को क्षैतिज रूप से फ्लोट करें (बाएँ/दाएँ)। <!DOCTYPE html> <html> <body> <img id=myID src=https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg width=300 height=300> <p>यह डेमो टेक्स्ट है। यह डेमो टेक्स

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

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

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

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