width পদ্ধতি

width পদ্ধতি এলিমেন্টের প্রস্থ প্রাপ্তি এবং পরিবর্তন করতে দেয়। এটা মনে রাখা গুরুত্বপূর্ণ যে আমরা প্রস্থের 'গণনাকৃত মান' পাব (computed width)। পদ্ধতিটির থেকে ভিন্ন css('width'), এটি একটি এককবিহীন মান ফেরত দেয় (উদাহরণস্বরূপ 400) এবং গাণিতিক গণনার জন্য সুবিধাজনক। পদ্ধতিটি এলিমেন্টের কন্টেন্টের প্রস্থ পায়, নির্বিশেষে CSS বৈশিষ্ট্য নির্দিষ্ট করা box-sizing। এটি সংক্রান্ত অসুবিধা এড়াতে, এটি ব্যবহার করার পরামর্শ দেওয়া হয় css('width')। গণনায় ত্রুটিও দেখা দিতে পারে, যদি ব্যবহারকারী পৃষ্ঠার আকার পরিবর্তন করে, এবং also, যদি এলিমেন্ট বা তার প্যারেন্ট লুকানো থাকে। প্রস্থের মান প্যাডিং এবং বর্ডারের মান বিবেচনা করে না।

সিনট্যাক্স

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

$(selector).width();

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

$(selector).width(new value);

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

$(selector).width(function(index in set, current width value));

উদাহরণ

চলুন div এ ক্লিক করলে এর প্রস্থ 40px এ পরিবর্তন করি, ব্যবহার করে width পদ্ধতি, এবং css ব্যবহার করে এর ব্যাকগ্রাউন্ড সবুজে পরিবর্তন করি:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

আরও দেখুন

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