HTML DOM စတိုင် ပိုင်ဆိုင်မှု
ဥပမာ
အနီရောင်ကို <h1> ဒြပ်စင်တစ်ခုသို့ ထည့်ပါ-
document.getElementById("myH1").style.color = "red";
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
စတိုင်ပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခု၏စတိုင်လ်ရည်ညွှန်းချက်ကိုကိုယ်စားပြုသည့် CSSStyleDeclaration အရာဝတ္ထုကို ပြန်ပေးသည်။
မတူညီသော CSS ဂုဏ်သတ္တိများကို အသုံးပြု၍ ဒြပ်စင်တစ်ခု၏ သီးခြားစတိုင်တစ်ခုကို ရယူရန် သို့မဟုတ် သတ်မှတ်ရန် စတိုင်ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။
မှတ်ချက်- စတိုင်လ်ပိုင်ဆိုင်မှု၊ ဥပမာ- ဒြပ်စင် .style = "color: red;" တွင် string တစ်ခုသတ်မှတ်ခြင်းဖြင့် စတိုင်များကို သတ်မှတ်ရန် မဖြစ်နိုင်ပါ ။ ဒြပ်စင်တစ်ခု၏ စတိုင်ကို သတ်မှတ်ရန်၊ "CSS" ပိုင်ဆိုင်မှုကို စတိုင်လ်ထည့်သွင်းပြီး ဤကဲ့သို့ တန်ဖိုးသတ်မှတ်ပါ-
element.style.backgroundColor = "red"; // set the background color of an element to red
သင်တွေ့မြင်ရသည့်အတိုင်း၊ CSS ဂုဏ်သတ္တိများသတ်မှတ်ခြင်းအတွက် JavaScript syntax သည် CSS (နောက်ခံအရောင်အစား နောက်ခံအရောင်) ထက် အနည်းငယ်ကွဲပြားပါသည်။
ရရှိနိုင်သောဂုဏ်သတ္တိများစာရင်းအတွက်၊ ကျွန်ုပ်တို့၏ပုံစံအရာဝတ္ထုအကိုးအ ကားကို ကြည့်ပါ ။
မှတ်ချက်
။ _ စာရွက်စာတမ်း သို့မဟုတ် ပြင်ပစတိုင်စာရွက်များရှိ <head> ကဏ္ဍမှ စတိုင်စည်းမျဉ်းများအကြောင်း အချက်အလက်ရယူရန် ဤပိုင်ဆိုင်မှုကို အသုံးပြု၍မရပါ။
သို့သော်၊ document.getElementsByTagName() ကို အသုံးပြု၍ <head> မှ <style> ဒြပ်စင်ကို သင်ဝင်ရောက်နိုင်သည်။
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
မှတ်ချက်- စတိုင်ပိုင်ဆိုင်မှု တွင် သတ်မှတ်ထားသော အခြား CSS ဂုဏ်သတ္တိများကို စတိုင်လ် ရည်ညွှန်းချက်တွင် ဖော်ပြနိုင်သည့် အခြား CSS ဂုဏ်သတ္တိများကို ထပ်ရေးမည်မဟုတ်သောကြောင့် .setAttribute("style", "...") နည်းလမ်း အစား စတိုင် ပိုင်ဆိုင်မှုကို အသုံးပြုရန် အကြံပြုအပ်ပါသည် ။
Browser ပံ့ပိုးမှု
Property | |||||
---|---|---|---|---|---|
style | Yes | Yes | Yes | Yes | Yes |
အထားအသို
စတိုင်ဂုဏ်သတ္တိများကို ပြန်ပေးသည်-
element.style.property
စတိုင်ဂုဏ်သတ္တိများ သတ်မှတ်ပါ-
element.style.property = value
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
နည်းပညာဆိုင်ရာအသေးစိတ်
ပြန်ပို့တန်ဖိုး- | ဒြပ်စင်တစ်ခု၏စတိုင်လ်ရည်ညွှန်းချက်ကို ကိုယ်စားပြုသည့် CSSStyle Declaration object တစ်ခု |
---|---|
DOM ဗားရှင်း | Dom Level 2 CSS |
နောက်ထပ် ဥပမာများ
ဥပမာ
<p> ဒြပ်စင်တစ်ခု၏ ထိပ်ဘောင်တန်ဖိုးကို ရယူပါ-
var x = document.getElementById("myP").style.borderTop;
ဆက်စပ်စာမျက်နှာများ
CSS ကျူတိုရီရယ်- CSS ကျူတိုရီရယ်
CSS ရည်ညွှန်းချက်- CSS ဂုဏ်သတ္တိများ
HTML DOM ရည်ညွှန်းချက်- ပုံစံအရာဝတ္ထု ရည်ညွှန်းချက်
HTML အကိုးအကား- HTML <style> tag
❮ Element Object