getBoundingClientRect နည်းလမ်း

getBoundingClientRect နည်းလမ်းတွင် element ၏ ကိုဩဒိနိတ်အရာဝတ္ထု ပါရှိသည်။ ကိုဩဒိနိတ်များကို စာမျက်နှာ၏မြင်နိုင်သောအပိုင်းနှင့်အညီ ဆွဲချကြည့်ခြင်းကို ထည့်မတွက်ဘဲ (ပြတင်းပေါက်နှင့်အညီ) တွက်ချက်သည်။ ဆိုလိုသည်မှာ position ဂုဏ်သတ္တိတွင် fixed တန်ဖိုးဖြင့်သတ်မှတ်ထားသကဲ့သို့ဖြစ်သည်။

ပြန်လာသောအရာဝတ္ထုတွင် ဂုဏ်သတ္တိများပါရှိသည်: left, top, right, bottom, width, height. သတိပြုရမည်မှာ ဤဂုဏ်သတ္တိများသည် CSS ဂုဏ်သတ္တိများနှင့် မည်သည့်ဆက်စပ်မှုမှ မရှိပါ။ ၎င်းတို့တွင် element ၏သက်ဆိုင်ရာအခြမ်းများဆီသို့ အကွာအဝေးများ ပါရှိသည်။ left/right အတွက် - စာမျက်နှာ၏မြင်နိုင်သောနေရာ၏ ဘယ်ဘက်အစွန်းမှ၊ top/bottom အတွက် - အပေါ်ဆုံးအစွန်းမှ ဖြစ်သည်။

ဝါကျဖွဲ့ပုံ

element.getBoundingClientRect();

ဥပမာ

element ၏ ကိုဩဒိနိတ်များကိုရယူမည်:

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

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

let elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

ဤသည်ကိုလည်း ကြည့်ပါ

offsetParent ဂုဏ်သတ္တိ၊
၎င်းသည် positioning ရှိသော မိဘ element ကို ပါရှိသည်
offsetTop ဂုဏ်သတ္တိ၊
၎င်းသည် element ၏ အပေါ်ဆုံးမှ အကွာအဝေးကို ပါရှိသည်
offsetLeft ဂုဏ်သတ္တိ၊
၎င်းသည် element ၏ ဘယ်ဘက်မှ အကွာအဝေးကို ပါရှိသည်
elementFromPoint နည်းလမ်း၊
၎င်းသည် ကိုဩဒိနိတ်များဖြင့် element ကို ပြန်ပေးသည်