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

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

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

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

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

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

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

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

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

javascript let computedStyle = getComputedStyle(elem);

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

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

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

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

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

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

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

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