ගුණය clientHeight

ගුණය clientHeight අඩංගු කරන්නේ මූලද්‍රව්‍යයේ උස සීමා තුළ එකට padding සමඟ, නමුත් border සහ ස්ක්‍රෝල් කිරීම නොමැතිව.

වාක්‍ය රචනා ක්‍රමය

javascriptමූලද්‍රව්‍යය.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

උදාහරණය

මූලද්‍රව්‍යයට ස්ක්‍රෝලයක් පෙනෙන්නට පටන් ගන්නේ නම්, පළල අන්තර්ගතය ස්ක්‍රෝලයේ පළලින් අඩු වේ (ආසන්න වශයෙන් 16px - බ්‍රවුසරය, මෙහෙයුම් පද්ධතිය, උපාංගය අනුව). පහත උදාහරණයේ මූලද්‍රව්‍යයේ පළල, අපේක්ෂා කළ පරිදි වඩා අඩු වනු ඇත:

html<div id="elem">මෙම මූලද්‍රව්‍යයට ස්ක්‍රෝලයක් ඇත.</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

මෙයත් බලන්න