jQuery में innerWidth और innerHeight विधियाँ

innerWidth और innerHeight विधियों की सहायता से हम तत्वों की चौड़ाई और ऊँचाई प्राप्त करते हैं, लेकिन इस बार केवल कॉन्टेंट ही नहीं, बल्कि आंतरिक पैडिंग - padding को भी ध्यान में रखा जाता है।

आइए पैराग्राफ #test के चौड़ाई और ऊँचाई के मान innerWidth और innerHeight की सहायता से प्राप्त करें, और उन्हें दूसरे पैराग्राफ में प्रदर्शित करें। मान लीजिए हमारे पास दो पैराग्राफ हैं:

<p id="test">text</p>
<p id="out"></p>

CSS इस प्रकार दिखती है:

p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}

Javascript में हम निम्नलिखित कोड लिखते हैं:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

जैसा कि आप देख सकते हैं, मान पहले से ही 10px से भिन्न हैं, क्योंकि आंतरिक पैडिंग को ध्यान में रखा जाता है, जो हमारे मामले में सभी तरफ 5px है।

इसके अलावा, केवल innerWidth और innerHeight विधियों की सहायता से हम तत्वों की चौड़ाई और ऊँचाई के मान बदल सकते हैं। उदाहरण के लिए, आइए डिव #test1 की चौड़ाई 250px के बराबर सेट करें, और #test2 की ऊँचाई - 200px:

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

पहले कार्य के समाधान को पूरा करें - डिव #wrapper के नीचे दूसरे पैराग्राफ में डिव #wrapper की चौड़ाई और ऊँचाई के मान प्रदर्शित करें, इस बार आंतरिक पैडिंग को ध्यान में रखते हुए, लेकिन बॉर्डर और बाहरी पैडिंग को ध्यान में रखे बिना।