एचटीएमएल डोम स्टाइल कॉलम संपत्ति

<घंटा/>

HTML DOM कॉलम प्रॉपर्टी का इस्तेमाल कॉलमविड्थ और कॉलमकाउंट प्रॉपर्टी में हेरफेर करने के लिए किया जाता है।

−

. के लिए वाक्य रचना निम्नलिखित है

कॉलम प्रॉपर्टी सेट करना -

object.style.columns = "auto|column-width column-count|initial|inherit"

उपरोक्त संपत्ति मूल्यों को इस प्रकार समझाया गया है -

Value <वें शैली ="चौड़ाई:64.2176%;">विवरण
स्वतः	यह स्तंभ-चौड़ाई और स्तंभ-गणना को स्वतः पर सेट करता है और यह डिफ़ॉल्ट मान है।
स्तंभचौड़ाई	कॉलम की चौड़ाई निर्दिष्ट करना।
कॉलमगणना	कॉलम संख्याओं को निर्दिष्ट करना।
प्रारंभिक	इस गुण को प्रारंभिक मान पर पूर्वनिर्धारित करना।
उत्तराधिकारी	मूल संपत्ति मूल्य को विरासत में मिला

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

उदाहरण

<!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="The columns are now modified";
   }
</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>Change the above div columns property by clicking the below button</p>
   <button onclick="changeColumns()">Change Columns</button>
   <p id="Sample"></p>
</body>
</html>

आउटपुट

एचटीएमएल डोम स्टाइल कॉलम संपत्ति

“कॉलम बदलें . पर क्लिक करने पर "बटन -

एचटीएमएल डोम स्टाइल कॉलम संपत्ति