JavaScript တွင် အသုံးပြုသူစိတ်ကြိုက် Attributes များ

HTML တွင် သင့်ကိုယ်ပိုင်၊ အသုံးပြုသူစိတ်ကြိုက် attributes များကို tag များထဲသို့ ပေါင်းထည့်ခွင့်ပြုပါသည်။ အဆိုပါ attributes များသည် data- ဖြင့် စတင်ရမည်ဖြစ်ပြီး၊ ထို့နောက်တွင် သင့်အတွက်အဆင်ပြေသော မည်သည့် attribute အမည်မဆို လာနိုင်ပါသည်။

အသုံးပြုသူစိတ်ကြိုက် attributes များကို များပြားလှသော နည်းလမ်းအမျိုးမျိုးဖြင့် အသုံးပြုနိုင်ပါသည်။ ထိုနည်းလမ်းများစွာကို နောက်ပိုင်းတွင် သင်ခန်းစာအဖြစ် လေ့လာပါမည်၊ ထို့ထက်များစွာသော အသုံးပြုပုံများကို နောင်တွင် သင်ကိုယ်တိုင် တီထွင်နိုင်ပါသည်။

�ဆိုပါ attributes များကို ရည်ညွှန်းခြင်းသည် စံနည်းလမ်းအတိုင်း မဟုတ်ပါ။ ယခင်က ကျွန်ုပ်တို့လုပ်ခဲ့သကဲ့သို့ element ၏ တူညီသောအမည်ရှိ property သို့ ရိုးရိုးရှင်းရှင်း ရည်ညွှန်း၍ မရပါ။ အထူး property ဖြစ်သော dataset ကို အသုံးပြုရမည်ဖြစ်ပြီး၊ ထို property ၏နောက်တွင် data- မပါသော attribute ၏အမည်ကို အောက်ဆီပြခြင်းဖြင့် ရေးသားရပါမည်။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့၏ attribute ၏အမည်သည် data-test ဖြစ်ပါက၊ ၎င်းကို ရည်ညွှန်းရန် elem.dataset.test ဟု ကျွန်ုပ်တို့ ရေးသားပါမည်။ ထိုelem သည် ကျွန်ုပ်တို့၏ element ပါဝင်သည့် variable ဖြစ်ပါသည်။

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

<div id="elem" data-num="1000"></div>

၎င်း၏ data-num attribute ၏တန်ဖိုးကို စခရင်ပေါ်တွင် ဖော်ပြကြပါစို့။

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 ကိုဖော်ပြမည်

ယခု ထို attribute သို့ အခြားတန်ဖိုးတစ်ခု သတ်မှတ်ပါမည်။

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

အောက်ပါ code ကို ပေးထားပါသည်။

<div id="elem" data-text="str">text</div>

div ကို ကလစ်နှိပ်လိုက်သောအခါ ၎င်း၏ text ၏အဆုံးသို့ ၎င်း၏ data-text attribute အတွင်းရှိ အကြောင်းအရာများ ပေါင်းထည့်သွားရန် ပြုလုပ်ပါ။

data-num attribute အတွင်း၌ ၎င်းတို့၏ အစဉ်လိုက်နံပါတ်များပါရှိသော div များကို ပေးထားပါသည်။

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

မည်သည့် div ကိုမဆို ကလစ်နှိပ်လိုက်သောအခါ ၎င်း၏အဆုံးသို့ ၎င်း၏ အစဉ်လိုက်နံပါတ်ကို ရေးသွင်းသွားရန် ပြုလုပ်ပါ။

ခလုတ်တစ်ခုကို ပေးထားပါသည်။ ၎င်းခလုတ်သည် ၎င်းကို နှိပ်ချက်အရေအတွက်ကို ရေတွက်ပြီး၊ မည်သည့် အသုံးပြုသူစိတ်ကြိုက် attribute အတွင်း၌မဆို သိမ်းဆည်းသွားရန် ပြုလုပ်ပါ။ အခြားခလုတ်တစ်ခုကို ကလစ်နှိပ်သောအခါ ပထမခလုတ်ပေါ်တွင် နှိပ်ချက်မည်မျှရှိခဲ့သည်ကို စခရင်ပေါ်တွင် ဖော်ပြရန် လုပ်ဆောင်ပါ။

input တစ်ခုကို ပေးထားပါသည်။

<input id="elem" data-length="5">

ဤ input တွင် data-length attribute အတွင်း၌ input ထဲသို့ ရိုက်ထည့်ရန် လိုအပ်သော စာလုံးအရေအတွက် ပါရှိပါသည်။ focus ပျောက်သွားသောအခါ၊ ရိုက်ထည့်ထားသော စာလုံးအရေအတွက်သည် သတ်မှတ်ထားသည့် အရေအတွက်နှင့် မကိုက်ညီပါက ၎င်းအကြောင်းကို message တစ်ခု ဖော်ပြသွားရန် ပြုလုပ်ပါ။

input တစ်ခုကို ပေးထားပါသည်။

<input id="elem" data-min="5" data-max="10">

� input တွင် data-min နှင့် data-max attributes များတွင် အတိုင်းအတာအပိုင်းအခြားတစ်ခု ပါရှိပါသည်။ focus ပျောက်သွားသောအခါ၊ ရိုက်ထည့်ထားသော စာလုံးအရေအတွက်သည် ဤအတိုင်းအတာအပိုင်းအခြားအတွင်း မကျရောက်ပါက ၎င်းအကြောင်းကို message တစ်ခု ဖော်ပြသွားရန် ပြုလုပ်ပါ။