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 ডিভের প্রস্থ এবং উচ্চতার মানগুলি আউটপুট করুন, এবার অভ্যন্তরীণ প্যাডিং বিবেচনা করে, কিন্তু সীমানা এবং বাহ্যিক প্যাডিং বিবেচনা না করে।