getComputedStyle function

getComputedStyle function သည် element တစ်ခု၏ မည်သည့် CSS property တန်ဖိုးကိုမဆို ရယူခွင့်ပြုပေးပါသည်၊ CSS file ထဲမှပင် ရယူနိုင်ပါသည်။

ဝါကျဖွဲ့ပုံ

let object = getComputedStyle(element);

အသေးစိတ်အချက်များ

၎င်း၏လုပ်ဆောင်ပုံ (သတိပြုရန်: ကျွန်ုပ်တို့မျှော်လင့်ထားသည့်အတိုင်း မဟုတ်ပါ)။ parameter အဖြစ် function သည် element တစ်ခုကို လက်ခံပြီး၊ ပေးပို့လိုက်သော element ၏ CSS properties အားလုံးကို ပါဝင်သော object တစ်ခုကို ပြန်ပေးပါသည်။ ထို object ကို variable တစ်ခုထဲထည့်ကြည့်ရအောင် style။ အမည်သည် စိတ်ကြိုက်ဖြစ်ပါသည်၊ ၎င်းသည် variable တစ်ခုသာဖြစ်ပြီး - ကျွန်ုပ်တို့ကြံဆသလို ခေါ်ဆိုသုံးစွဲနိုင်ပါသည်။

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style တွင် CSS properties များ ရှိပါသည်

ဥပမာအားဖြင့် အနံကို ထုတ်ကြည့်ကြရအောင်။ ၎င်းကို ဤသို့လုပ်ဆောင်ပါသည် - style.width။

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

ဥပမာအားဖြင့် ဘယ်ဘက် padding ကို ထုတ်ကြည့်လိုပါက - ဤသို့လုပ်ဆောင်ပါ - style.paddingLeft။

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

နောက်ဥပမာတွင် ကျွန်ုပ်တို့၏ element အတွက် ကျွန်ုပ်တို့စိတ်ဝင်စားသော CSS properties အားလုံးကို ထုတ်ကြည့်ပါမည်။

<div id="elem">စာသား</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' ကိုထုတ်ပြမည်
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' ကိုထုတ်ပြမည်
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' ကိုထုတ်ပြမည်

getComputedStyle ၏ တိကျမှုမရှိခြင်း

တစ်ခါတစ်ရံ function getComputedStyle သည် အနံနှင့်အမြင့်နှင့် အတိအကျမကိုက်ညီပါ။ ၎င်းမှာ padding နှင့် နယ်နိမိတ်များသည် block ကို ချဲ့ထွင်ပေးသောကြောင့်ဖြစ်ပါသည်။ နောက်ဥပမာတွင် block အား အနံ 200px သတ်မှတ်ပေးထားပြီး၊ နယ်နိမိတ်နှင့် border လည်းရှိပါသည်။ Block ၏ တကယ့်အနံမှာ 300px ဖြစ်သော်လည်း၊ getComputedStyle ကမူ 200px ကိုသာ ထုတ်ပြပါသည်။

<div id="elem">စာသား</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' ကိုထုတ်ပြမည်
console.log('height: ' + style.height); // '200px' ကိုထုတ်ပြမည်

ဆိုလိုသည်မှာ: getComputedStyle သည် block ၏ချဲ့ထွင်မှုကို လျစ်လျူရှုပြီး ၎င်း၏ အရွယ်အစားများကို ထိုချဲ့ထွင်မှုမရှိခဲ့သကဲ့သို့ ပြသသည်ဟု ဆိုလိုပါသည်။ သို့သော် ဤမျှတင်မကပါ: scroll bar ၏ ရှိမရှိသည်လည်း အရေးပါပါသည်။ browser အချို့သည် scroll bar ၏အနံကို getComputedStyle မှတွက်ချက်သော အနံမှ နုတ်ပစ်ပြီး၊ အချို့ကမနုတ်ပါ။ အတိုချုပ်အားဖြင့် ဤနေရာတွင် ဘရောက်ဇာအားလုံးနှင့် သဟဇာတမဖြစ်ပါ။ ထို့ကြောင့် အနံနှင့်အမြင့်ကို သတ်မှတ်ရန် getComputedStyle ကို အသုံးမပြုဘဲ၊ မက်ထရစ်များကို အသုံးပြုသင့်ပြီး ၎င်းတို့ကို ကျွန်ုပ်တို့ အနည်းငယ်နောက်ပိုင်းတွင် လေ့လာပါမည်။

တွက်ချက်ထားသော တန်ဖိုးများ

နောက်ထပ်သတိပြုစရာ တစ်ခုရှိပါသည်။ အနံကို % ဖြင့် သတ်မှတ်ထားပါက - getComputedStyle လုပ်ဆောင်ပြီးနောက် ကျွန်ုပ်တို့မြင်ရမည်မှာ px ဖြင့်ဖြစ်ပါသည်။ ဆိုလိုသည်မှာ အခြေခံအားဖြင့် ကျွန်ုပ်တို့ရရှိသည်မှာ သတ်မှတ်ထားသော အနံမဟုတ်ဘဲ တွက်ချက်ထားသောအနံ ဖြစ်သည်။ အောက်ပါ ဥပမာကို ကြည့်ပါ။

<div id="elem">စာသား</div>

#elem {
	width: 30%; /* အနံကို % ဖြင့် သတ်မှတ်ထားသည် */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // အနံကို px ဖြင့် ထုတ်ပြမည်

ဆက်လက်ကြည့်ရှုရန်

cssText property,
သည် CSS styles များကို အစုလိုက်သတ်မှတ်ပေးသည်