clientWidth ගුණාංගය

clientWidth ගුණාංගය අවයවයේ පළල අඩංගු කරයි සීමා තුළ padding සමඟ, නමුත් border නොමැතිව සහ අනුචලනය.

වාක්‍ය රීතිය

javascriptමූලද්‍රව්‍යය.clientWidth;

උදාහරණය

අපි මූලද්‍රව්‍යයේ ප්‍රමාණය සොයා ගනිමු:

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

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

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

javascript130

උදාහරණය

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

html<div id="elem">මෙම මූලද්‍රව්‍යයට අනුචලනය ඇත.</div>

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

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

javascript114 (බ්‍රවුසරය මත රඳා පවතී)

උදාහරණය

මූලද්‍රව්‍යය සඟවා ඇත්නම්, clientWidth 0 ට සමාන වේ:

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

css#elem {
  display: none; /* සඟවා ඇති මූලද්‍රව්‍යය */
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
}

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

javascript0

මෙයද බලන්න