clientHeight প্রপার্টি

clientHeight প্রপার্টি এলিমেন্টের সীমানার ভিতরের উচ্চতা ধারণ করে padding সহ, কিন্তু border এবং স্ক্রল bar ছাড়া।

সিনট্যাক্স

element.clientHeight;

উদাহরণ

চলুন একটি এলিমেন্টের সাইজ বের করি:

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

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

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

কোড এক্সিকিউট করার ফলাফল:

130

উদাহরণ

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

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

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

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

কোড এক্সিকিউট করার ফলাফল:

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

উদাহরণ

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

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

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

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

কোড এক্সিকিউট করার ফলাফল:

0

আরও দেখুন

clientWidth প্রপার্টি,
যা এলিমেন্টের সীমানার ভিতরের প্রস্থ ধারণ করে
getComputedStyle মেথড,
যা এলিমেন্টের CSS প্রপার্টির মান পায়