HTML DOM टेक्स्टएरिया rows प्रॉपर्टी: पंक्तियों की संख्या सेट/प्राप्त करना

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

सिंटैक्स

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

object.rows

2. rows सेट करना:

object.rows = "number"

उदाहरण: पंक्तियों को 8 पर सेट करना

<!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 टेक्स्टएरिया rows प्रॉपर्टी डेमो</h1>
  <textarea>नमस्ते! मैं HTML दस्तावेज़ में कुछ डमी टेक्स्ट के साथ एक टेक्स्टएरिया एलिमेंट हूँ।</textarea>
  <button onclick="set()" class="btn">पंक्तियाँ = 8 सेट करें</button>
  <script>
    function set() {
      document.querySelector("textarea").rows = '8';
    }
  </script>
</body>
</html>

आउटपुट

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

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

इकाई: कैरेक्टर पंक्तियों की संख्या (पिक्सेल नहीं)
डिफ़ॉल्ट: 2 (यदि निर्दिष्ट नहीं)
न्यूनतम: 1
CSS ओवरराइड: CSS height या min-height rows को ओवरराइड करता है
आकार: वास्तविक पिक्सेल ऊंचाई फॉन्ट आकार और लाइन-हाइट पर निर्भर करती है

rows vs CSS height

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

रिस्पॉन्सिव टेक्स्टएरिया पैटर्न

/* CSS-आधारित रिस्पॉन्सिव ऊंचाई */
textarea {
  min-height: 100px;
  height: auto;
  resize: vertical; /* उपयोगकर्ता आकार बदल सकता है */
}

/* या जावास्क्रिप्ट ऑटो-रिसाइज */
textarea.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});

cols के साथ संयोजन

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