HTML height एट्रिब्यूट: एलिमेंट्स की ऊंचाई पिक्सेल्स में सेट करना

HTML height एट्रिब्यूट किसी एलिमेंट की ऊंचाई पिक्सेल्स में घोषित करने के लिए उपयोग किया जाता है।

नोट: HTML5 के अनुसार, प्रतिशत (%) में ऊंचाई निर्दिष्ट करने का समर्थन हटा दिया गया था।

height एट्रिब्यूट वाले HTML एलिमेंट्स

• <canvas>
• <embed>
• <iframe>
• <img>
• <input> (केवल image टाइप)
• <object>
• <video>

उदाहरण: वीडियो ऊंचाई डायनामिकली बढ़ाना

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM वीडियो height</title>
  <style>
    * { padding: 2px; margin: 5px; }
    form { width: 70%; margin: 0 auto; text-align: center; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-वीडियो-height</legend>
      <video id="wordPressIntro" width="320" height="50" controls>
        <source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4">
      </video><br>
      <input type="button" onclick="getTrackDetails()" value="वीडियो दिखाई नहीं दे रहा">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var wordPressIntro = document.getElementById("wordPressIntro");
    function getTrackDetails() {
      wordPressIntro.height += 50;
      divDisplay.textContent = 'वीडियो ऊंचाई: ' + wordPressIntro.height;
    }
  </script>
</body>
</html>

आउटपुट परिदृश्य

1. 'वीडियो दिखाई नहीं दे रहा' बटन से पहले: वीडियो ऊंचाई 50px (बहुत छोटा)
2. बटन 3 बार क्लिक करने के बाद: ऊंचाई 200px हो जाती है, वीडियो स्पष्ट दिखता है

height एट्रिब्यूट के उपयोग के टिप्स

• हमेशा width के साथ उपयोग करें आस्पेक्ट रेशियो बनाए रखने के लिए
• CSS height प्रॉपर्टी एट्रिब्यूट को ओवरराइड करती है
• <img> के लिए: दोनों निर्दिष्ट करने से लेआउट शिफ्ट रुकता है
• <video> के लिए: कंट्रोल्स के लिए अतिरिक्त स्पेस जोड़ें
• <canvas> के लिए: ड्राइंग सरफेस का आकार सेट करता है (CSS आकार से अलग)

जावास्क्रिप्ट से एक्सेस

// पिक्सेल्स में संख्या के रूप में लौटाता है
var h = element.height;

// सेट करना (संख्या या स्ट्रिंग)
element.height = 300;
element.height = "300";