Window getComputedStyle()
ဥပမာ
ဒြပ်စင်တစ်ခု၏ တွက်ချက်ထားသော နောက်ခံအရောင်ကို ရယူပါ-
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
အောက်တွင် နောက်ထပ် ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
နည်းလမ်း သည် getComputedStyle()
HTML ဒြပ်စင်တစ်ခု၏ တွက်ချက်ထားသော CSS ဂုဏ်သတ္တိများနှင့် တန်ဖိုးများကို ရရှိသည်။
getComputedStyle()
နည်းလမ်းက a ကို ပြန်ပေး ပါတယ်
CSSStyleDeclaration object
။
တွက်ချက်ထားသောပုံစံ
တွက်ချက်ထားသောစတိုင်သည် ပုံစံဒီဇိုင်းရင်းမြစ်အားလုံးကို အသုံးပြုပြီးနောက် ဒြပ်စင်ပေါ်တွင်အသုံးပြုသည့်စတိုင်ဖြစ်သည်။
စတိုင်ရင်းမြစ်များ- ပြင်ပနှင့် အတွင်းပိုင်းစတိုင်စာရွက်များ၊ အမွေဆက်ခံထားသော စတိုင်များနှင့် ဘရောက်ဆာ မူရင်းစတိုင်များ။
ကိုလည်းကြည့်ပါ-
CSSStyle Declaration Object
အထားအသို
window.getComputedStyle(element, pseudoElement)
ကန့်သတ်ချက်များ
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
တန်ဖိုးကို ပြန်ပေးသည်။
ရိုက်ပါ။ | ဖော်ပြချက် |
အရာဝတ္ထုတစ်ခု | ဒြပ်စင်၏ CSS ဂုဏ်သတ္တိများနှင့် တန်ဖိုးများ အားလုံးပါရှိသော CSSStyleDeclaration object တစ်ခု။ |
နောက်ထပ် ဥပမာများ
အစိတ်အပိုင်းတစ်ခုမှ တွက်ချက်ထားသော ပုံစံအားလုံးကို ရယူပါ-
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
cssObjProp = cssObj.item(x)
text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
ဒြပ်စင်တစ်ခုရှိ ပထမစာလုံး၏ တွက်ချက်ထားသော ဖောင့်အရွယ်အစားကို ရယူပါ (pseudo-element ကို အသုံးပြု၍)
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Browser ပံ့ပိုးမှု
getComputedStyle()
ဘရောက်ဆာအားလုံးတွင် ထောက်ခံသည်-
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |