clientWidth ගුණාංගය
clientWidth ගුණාංගය අවයවයේ පළල අඩංගු කරයි
සීමා තුළ padding සමඟ,
නමුත් border නොමැතිව
සහ අනුචලනය.
වාක්ය රීතිය
මූලද්රව්යය.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 - බ්රවුසරය, මෙහෙයුම් පද්ධතිය, උපාංගය මත රඳා පවතී).
පහත උදාහරණයේ දී මූලද්රව්යයේ පළල අපේක්ෂා කළ ප්රමාණයට වඩා අඩු වනු ඇත,
අපේක්ෂා කළ ප්රමාණයට වඩා අඩු වේ:
<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 ගුණාංගයේ අගය ලබා ගනී
