outerWidth পদ্ধতি

outerWidth পদ্ধতি এলিমেন্টের অভ্যন্তরীণ প্যাডিং, বর্ডার এবং ঐচ্ছিকভাবে বাহ্যিক মার্জিন বিবেচনা করে এলিমেন্টের প্রস্থ প্রাপ্তি এবং পরিবর্তন করতে দেয়। এটা মনে রাখা গুরুত্বপূর্ণ যে আমরা প্রস্থের 'গণনাকৃত মান' (computed width) পাব। গণনায় ত্রুটি দেখা দিতে পারে যদি ব্যবহারকারী পৃষ্ঠার আকার পরিবর্তন করেন, অথবা যদি এলিমেন্ট বা তার প্যারেন্ট লুকানো থাকে।

সিনট্যাক্স

এভাবে আমরা একটি এলিমেন্টের প্রস্থ পেতে পারি। এই পদ্ধতিটি true বা false (false ডিফল্ট হিসেবে থাকে) হিসেবে একটি ঐচ্ছিক প্যারামিটার নিতে পারে, এটি নির্ভর করে বাহ্যিক মার্জিন গণনায় অন্তর্ভুক্ত করা হবে কিনা তার উপর। কিছু ক্ষেত্রে প্রাপ্ত মান ভগ্নাংশ হতে পারে:

$(selector).outerWidth([include_margin]);

এলিমেন্টের প্রস্থ পরিবর্তন করতে - আপনি কেবল একটি সংখ্যা (উদাহরণস্বরূপ 400) পাস করতে পারেন, তখন একক হবে পিক্সেল, অথবা একটি স্ট্রিং, যাতে একক উল্লেখ থাকে (উদাহরণস্বরূপ '10em'):

$(selector).outerWidth(new value, [include_margin]);

আমরা সেটের প্রতিটি এলিমেন্টে একটি নির্দিষ্ট ফাংশনও প্রয়োগ করতে পারি। এতে ফাংশনটি প্রথম প্যারামিটার হিসেবে সেটে এলিমেন্টের ইনডেক্স পাবে, এবং দ্বিতীয় প্যারামিটার হিসেবে পাবে সেই নির্দিষ্ট এলিমেন্টের বর্তমান প্রস্থ মান। ফাংশনের ভিতরে this বর্তমান এলিমেন্টকে নির্দেশ করবে। এলিমেন্টের প্রস্থ মানটি সেই মানে পরিবর্তিত হবে, যা ফাংশনটি রিটার্ন করে:

$(selector).outerWidth(function(index, currentWidth));

উদাহরণ

তুলনা করার জন্য আসুন #test প্যারাগ্রাফের প্রস্থ সম্পর্কে তথ্য আউটপুট করি, যা প্রাপ্ত হয়েছে width, innerWidth এবং outerWidth পদ্ধতি দ্বারা:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

আরও দেখুন

width পদ্ধতি,
যা এলিমেন্টের প্রস্থ প্রাপ্তি এবং পরিবর্তন করতে দেয়
innerWidth পদ্ধতি,
যা এলিমেন্টের অভ্যন্তরীণ প্যাডিং বিবেচনা করে এর প্রস্থ প্রাপ্তি এবং পরিবর্তন করতে দেয়