innerWidth মেথড

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

সিনট্যাক্স

এলিমেন্টের প্রস্থ প্রাপ্তি। কিছু ক্ষেত্রে প্রাপ্ত মান ভগ্নাংশ হতে পারে:

$(সিলেক্টর).innerWidth();

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

$(সিলেক্টর).innerWidth(নতুন মান);

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

$(সিলেক্টর).innerWidth(function(সেটে ইনডেক্স, প্রস্থের বর্তমান মান));

উদাহরণ

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

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

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

আমরা 10px পার্থক্য দেখতে পাব, যা আমাদের বাম এবং ডান অভ্যন্তরীণ প্যাডিংয়ের সমষ্টি।

আরও দেখুন

width মেথড,
যা এলিমেন্টের প্রস্থ প্রাপ্তি এবং পরিবর্তন করতে দেয়
outerWidth মেথড,
যা এলিমেন্টের প্রস্থ প্রাপ্তি এবং পরিবর্তন করতে দেয়, এর প্যাডিং এবং বর্ডার বিবেচনা করে