HTML DOM टेक्स्टएरिया cols प्रॉपर्टी: कॉलम्स (चौड़ाई) सेट/प्राप्त करना

HTML DOM टेक्स्टएरिया cols प्रॉपर्टी टेक्स्ट एरिया एलिमेंट के cols एट्रिब्यूट का मान लौटाती और संशोधित करती है। यह टेक्स्ट एरिया की दृश्य चौड़ाई (कैरेक्टर्स की संख्या में) निर्धारित करती है।

सिंटैक्स

1. cols प्राप्त करना:

object.cols

2. cols सेट करना:

object.cols = "number"

उदाहरण: कॉलम्स को 50 पर सेट करना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightseagreen; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
<body>
  <h1>DOM टेक्स्टएरिया cols प्रॉपर्टी डेमो</h1>
  <textarea>नमस्ते! मैं HTML दस्तावेज़ में कुछ डमी टेक्स्ट के साथ एक टेक्स्टएरिया एलिमेंट हूँ।</textarea>
  <button onclick="set()" class="btn">कॉलम्स = 50 सेट करें</button>
  <script>
    function set() {
      document.querySelector("textarea").cols = '50';
    }
  </script>
</body>
</html>

आउटपुट

प्रारंभ में: डिफ़ॉल्ट चौड़ाई (आमतौर पर 20 कॉलम्स) वाला टेक्स्टएरिया
"कॉलम्स = 50 सेट करें" क्लिक: टेक्स्टएरिया 50 कैरेक्टर्स चौड़ा हो जाता है

cols एट्रिब्यूट विवरण

इकाई: औसत कैरेक्टर चौड़ाई (आमतौर पर '0' ग्लिफ़)
डिफ़ॉल्ट: 20 (यदि निर्दिष्ट नहीं)
न्यूनतम: 1
CSS ओवरराइड: CSS width cols को ओवरराइड करता है
wrap="hard" के लिए आवश्यक: हार्ड रैप मोड cols पर निर्भर करता है

cols vs CSS width

पहलू	cols एट्रिब्यूट	CSS width
इकाई	कैरेक्टर काउंट	पिक्सेल, em, rem, %
रिस्पॉन्सिव	कम	अधिक
फॉन्ट सापेक्ष	हाँ (औसत कैरेक्टर)	em/rem के साथ हाँ
प्राथमिकता	कम	अधिक (ओवरराइड करता है)

रिस्पॉन्सिव टेक्स्टएरिया चौड़ाई

/ CSS-आधारित */
textarea {
  width: 100%;
  max-width: 800px;
  min-width: 300px;
  box-sizing: border-box; /* पैडिंग/बॉर्डर शामिल */
}

/* या cols फॉलबैक के साथ */
textarea {
  width: 100%;
}
<textarea cols="40"></textarea> /* CSS विफल होने पर फॉलबैक */

rows और cols एक साथ

<textarea rows="15" cols="80"></textarea>
/* लगभग 15 पंक्तियाँ x 80 कैरेक्टर = 1200 कैरेक्टर दृश्य क्षेत्र */

आधुनिक दृष्टिकोण

आधुनिक वेब विकास में, rows और cols के बजाय CSS width, height, min-height, resize का उपयोग करना पसंद किया जाता है क्योंकि ये अधिक लचीले और रिस्पॉन्सिव होते हैं।