CSS ဖိုင်များမှ property များကို JavaScript တွင် ဖတ်ခြင်း

CSS ဖိုင်မှ သတ်မှတ်ထားသော property များကို getComputedStyles အထူး function ကို အသုံးပြု၍ ဖတ်နိုင်ပါသည်။

ဤသို့မည်သို့လုပ်ဆောင်သည်ကို ကြည့်ကြပါစို့။ အောက်ပါ element တစ်ခု ကျွန်ုပ်တို့တွင် ရှိသည်ဆိုပါစို့-

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

ဤ element အတွက် အောက်ပါ style များ သတ်မှတ်ထားသည်ဆိုပါစို့-

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

element ဆီသို့ လင့်ခ်တစ်ခုကို variable တွင် ရယူပါမည်-

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

ယခု ရရှိထားသော element ၏ လင့်ခ်ကို getComputedStyles function ၏ parameter အဖြစ် ပေးပို့ပါမည်-

let computedStyle = getComputedStyle(elem);

ရလဒ်အနေဖြင့် ကျွန်ုပ်တို့ element အတွက် CSS property များ၏ တန်ဖိုးများပါဝင်သော object တစ်ခုကို ရရှိမည်ဖြစ်သည်။ ၎င်းကို အသုံးပြု၍ ဥပမာအားဖြင့် အရောင်ကို ဖတ်ကြည့်ကြပါစို့-

console.log(computedStyle.color); // 'red' ကို ပြသမည်

ယခု အကျယ်ကို ဖတ်ကြည့်ပါမည်-

console.log(computedStyle.width); // '100px' ကို ပြသမည်

ယခု ဖောင့်အရွယ်အစားကို ဖတ်ကြည့်ပါမည်-

console.log(computedStyle.fontSize); // '20px' ကို ပြသမည်

Element တစ်ခုအတွက် အောက်ပါ style များ သတ်မှတ်ထားသည်-

#elem {
	width: 200px;
	height: 200px;
}

ခလုတ်တစ်ခုကို နှိပ်လိုက်သောအခါ element ၏ အကျယ်နှင့် အမြင့်ကို ထုတ်ပြပါ။

Element တစ်ခုအတွက် အောက်ပါ style များ သတ်မှတ်ထားသည်-

#elem {
	width: 200px;
	height: 200px;
}

ခလုတ်တစ်ခုကို နှိပ်လိုက်သောအခါ element ၏ အကျယ်နှင့် အမြင့်ကို နှစ်ဆတိုးပေးပါ။