বৈশিষ্ট্য clientWidth

বৈশিষ্ট্য clientWidth এ রয়েছে সীমানার ভিতরে এলিমেন্টের প্রস্থ padding সহ, কিন্তু border ছাড়া এবং স্ক্রল বার।

সিনট্যাক্স

element.clientWidth;

উদাহরণ

আসুন এলিমেন্টের আকার খুঁজে বের করি:

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

কোড এক্সিকিউশনের ফলাফল:

130

উদাহরণ

যদি এলিমেন্টে স্ক্রল বার উপস্থিত হয় তবে সামগ্রীর প্রস্থ স্ক্রল বারের প্রস্থ দ্বারা হ্রাস পায় (প্রায় 16px - ব্রাউজার, OS, ডিভাইসের উপর নির্ভর করে)। নিম্নলিখিত উদাহরণে এলিমেন্টের প্রস্থ প্রত্যাশার চেয়ে কম হবে:

<div id="elem">এই এলিমেন্টের একটি স্ক্রল বার আছে।</div>

#elem {
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
	overflow: scroll;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

কোড এক্সিকিউশনের ফলাফল:

114 (ব্রাউজারের উপর নির্ভর করে)

উদাহরণ

যদি এলিমেন্টটি লুকানো থাকে, তাহলে clientWidth সমান হবে 0:

<div id="elem"></div>

#elem {
	display: none; /* লুকানো এলিমেন্ট */
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

কোড এক্সিকিউশনের ফলাফল:

0

আরো দেখুন

বৈশিষ্ট্য clientHeight,
যা সীমানার ভিতরে এলিমেন্টের উচ্চতা ধারণ করে
পদ্ধতি getComputedStyle,
যা এলিমেন্টের CSS বৈশিষ্ট্যের মান প্রাপ্ত করে