जावास्क्रिप्ट में विंडो innerWidth और innerHeight प्रॉपर्टीज

परिचय

window.innerWidth प्रॉपर्टी विंडो के कंटेंट एरिया की चौड़ाई लौटाती है (स्क्रॉलबार सहित यदि मौजूद हो), और window.innerHeight विंडो के कंटेंट एरिया की ऊंचाई लौटाती है। ये व्यूपोर्ट आयामों के लिए मानक प्रॉपर्टीज हैं।

उदाहरण

निम्न कोड जावास्क्रिप्ट में विंडो innerWidth और innerHeight प्रॉपर्टीज के लिए है:

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>विंडो डायमेंशन्स</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>विंडो innerWidth और innerHeight प्रॉपर्टीज</h1> <div style="color: green;" class="result"></div> <button class="Btn">यहाँ क्लिक करें</button> <h3> विंडो की innerWidth और innerHeight प्राप्त करने के लिए ऊपर दिए गए बटन पर क्लिक करें </h3> <script> const resEle = document.querySelector(".result"); document.querySelector(".Btn").addEventListener("click", () => { resEle.innerHTML = 'Window.innerWidth = ' + window.innerWidth + '<br>'; resEle.innerHTML += 'Window.innerHeight = ' + window.innerHeight + '<br>'; }); </script> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:

'यहाँ क्लिक करें' बटन पर क्लिक करने पर:

संबंधित प्रॉपर्टीज

रिसाइज़ इवेंट

window.addEventListener('resize', () => {
  console.log(`नया आकार: ${window.innerWidth}x${window.innerHeight}`);
});