jQuery-এ outerWidth এবং outerHeight পদ্ধতি

সর্বশেষ জোড়া পদ্ধতি - outerWidth এবং outerHeight, যার সাহায্যে উপাদানের প্রস্থ এবং উচ্চতা প্রান্তরেখা এবং প্যাডিং সহ পাওয়া সম্ভব, এবং বাহ্যিক মার্জিন margin উপেক্ষা করা যেতে পারে।

একটি উদাহরণ দেখা যাক। ধরা যাক আমাদের একটি অনুচ্ছেদ আছে:

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

CSSটি এইরকম দেখাচ্ছে:

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

আসুন #test অনুচ্ছেদের প্রস্থ এবং উচ্চতার মানগুলি পাই, প্যাডিং এবং প্রান্তরেখা সহ, এর জন্য এই পদ্ধতিগুলিতে false পাঠানো প্রয়োজন বা বন্ধনীগুলি খালি রাখা যেতে পারে (কারণ এটি ইতিমধ্যেই পদ্ধতিতে ডিফল্টভাবে সেট আছে):

javascriptlet w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

এখন আমাদের মানগুলি আরও 4px দ্বারা আলাদা হবে, যেহেতু প্রতিটি দিকে প্রান্তরেখার পুরুত্ব 2px।

এবং এখন আসুন #test অনুচ্ছেদের প্রস্থ এবং উচ্চতার মানগুলি পাই, সমস্ত প্যাডিং এবং প্রান্তরেখা সহ, এর জন্য outerWidth এবং outerHeight পদ্ধতিতে true পাঠানো প্রয়োজন:

javascriptlet w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

এখন আমাদের মানগুলি আগের মানগুলি থেকে আরও 20px দ্বারা আলাদা হবে, যেহেতু আমাদের বাহ্যিক মার্জিন প্রতিটি দিকে 10px।

এছাড়াও outerWidth এবং outerHeight পদ্ধতিগুলির সাহায্যে আমরা উপাদানগুলির প্রস্থ এবং উচ্চতার মান পরিবর্তন করতে পারি। উদাহরণস্বরূপ, আসুন #test1 ডিভের প্রস্থ 250px এবং #test2 এর উচ্চতা - 200px সেট করি:

javascript$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

উপাদানের আকার নিয়ে কাজ করার সমস্ত উল্লিখিত পদ্ধতিগুলি সেটের প্রতিটি উপাদানে একটি ফাংশন প্রয়োগ করার সম্ভাবনাও প্রদান করে।