getBoundingClientRect နည်းလမ်း

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

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

ဝါကျဖွဲ့ပုံ

javascriptelement.getBoundingClientRect();

ဥပမာ

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

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

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

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

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