clientHeight প্রপার্টি

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

সিনট্যাক্স

javascriptelement.clientHeight;

উদাহরণ

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

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

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

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

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

javascript130

উদাহরণ

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

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

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

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

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

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

উদাহরণ

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

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

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

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

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

javascript0

আরও দেখুন