getBoundingClientRect ක්රමය
getBoundingClientRect ක්රමයට
මූලද්රව්යයේ ඛණ්ඩාංක වස්තුව අඩංගු වේ. ඛණ්ඩාංක ගණනය කරනු ලබන්නේ
පිටුවේ දෘශ්යමාන කොටසට සාපේක්ෂව වන අතර
ස්ක්රෝල් කිරීම සැලකිල්ලට නොගනී (කවුළුවට සාපේක්ෂව). එනම්
position
ගුණයේ fixed අගය සමඟ අදාළ වන ආකාරයටම.
ආපසු ලබා දෙන වස්තුවේ පහත ගුණාංග අඩංගු වේ: left,
top, right, bottom, width, height.
මෙම ගුණාංග CSS ගුණාංග සමඟ කිසිදු සම්බන්ධයක්
නොමැති බව සලකන්න. ඒවායේ අඩංගු වන්නේ
මූලද්රව්යයේ අදාළ පැතිවලට ඇති දුර වේ.
left/right සඳහා - පිටුවේ දෘශ්යමාන
ප්රදේශයේ වම් සීමාවෙන්, සහ top/bottom සඳහා - ඉහළ සීමාවෙන්.
වාක්ය රචනා ශාස්ත්රය
මූලද්රව්යය.getBoundingClientRect();
උදාහරණය
මූලද්රව්යයේ ඛණ්ඩාංක ලබා ගනිමු:
<div id="elem"></div>
#elem {
width: 100px;
height: 100px;
border: 1px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());
මෙයද බලන්න
-
offsetParentගුණය,
ස්ථානගත කිරීම සහිත මව්පියයා අඩංගු වේ -
offsetTopගුණය,
මූලද්රව්යයේ ඉහළින් ඇති විස්ථාපනය අඩංගු වේ -
offsetLeftගුණය,
මූලද්රව්යයේ වම්පසින් ඇති විස්ථාපනය අඩංගු වේ -
elementFromPointක්රමය,
ඛණ්ඩාංක අනුව මූලද්රව්යය ආපසු ලබා දෙයි
