JavaScript တွင် tag ၏ attributes များကို properties အဖြစ်

ယခု tag များ၏ attributes များကို ရယူနည်းကို သင်ယူကြပါစို့။ ဤနေရာတွင် အောက်ပါစည်းမျဉ်းကို လိုက်နာသည်- tag ၏ attribute တစ်ခုစီသည် DOM element ၏ အလားတူအမည်ရှိ property တစ်ခုနှင့် ကိုက်ညီသည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် ဤကဲ့သို့ tag တစ်ခုရှိသည်ဆိုပါစို့-

html<input id="elem" type="text">

ကျွန်ုပ်တို့၏ element သို့ reference ကို variable ထဲသို့ ရယူကြပါစို့-

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

ကျွန်ုပ်တို့လိုအပ်သော attributes များ၏ တန်ဖိုးများကို ထုတ်ပြကြပါစို့-

javascriptconsole.log(elem.id);   // 'elem' ကို ပြသမည်
console.log(elem.type); // 'text' ကို ပြသမည်

ယခု ဥပမာအနေဖြင့် attribute ၏တန်ဖိုးကို ပြောင်းလဲကြည့်ကြပါစို့-

javascriptelem.type = 'submit';

Задание 1

အောက်ပါ input ကို ပေးထားသည်-

html<input id="elem" type="email">

ခလုတ်တစ်ခုလည်း ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ အထက်ဖော်ပြပါ input ၏ type attribute အတွင်းရှိ အကြောင်းအရာကို စကရင်ပေါ်တွင် ထုတ်ပြပါ။

Задание 2

အောက်ပါ input ကို ပေးထားသည်-

html<input id="elem" type="email">

ခလုတ်တစ်ခုလည်း ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ type attribute အတွင်းသို့ submit တန်ဖိုးကို ရေးထည့်ပါ။

Задание 3

သင့်တွင် a tag ပုံစံ link တစ်ခု၊ ခလုတ်တစ်ခုနှင့် paragraph တစ်ခု ရှိသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ link ၏ href attribute အတွင်းရှိ အကြောင်းအရာကို paragraph ထဲသို့ ထုတ်ပြပါ။

Задание 4

သင့်တွင် link တစ်ခုနှင့် ခလုတ်တစ်ခု ရှိသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ link ၏ စာသားအဆုံးသို့ ၎င်း၏ href attribute အတွင်းရှိ အကြောင်းအရာကို ကွင်းစကွင်းပိတ် အတွင်း၌ ထည့်သွင်းပေးပါ။

Задание 5

သင့်တွင် ရုပ်ပုံတစ်ပုံ ရှိသည်။ ၎င်းကို img tag ဖြင့် စာမျက်နှာပေါ်တွင် ထားရှိပါ။ ခလုတ်တစ်ခုနှင့် paragraph တစ်ခုကိုလည်း ပေးထားသည်။ ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ paragraph ထဲသို့ ရုပ်ပုံ၏ src attribute မှ လမ်းကြောင်းကို ရေးသွားပါစေ။

Задание 6

img tag အတွင်း ရုပ်ပုံတစ်ပုံနှင့် ခလုတ်တစ်ခု ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ width attribute ထဲသို့ 300 တန်ဖိုးကို ရေးထည့်ပါ။

Задание 7

img tag အတွင်း ရုပ်ပုံတစ်ပုံနှင့် ခလုတ်တစ်ခု ပေးထားသည်။ width attribute ထဲတွင် အချို့သော အကျယ်အဝန်းကို သတ်မှတ်ထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ ရုပ်ပုံ၏အကျယ်အဝန်းသည် 2 � တိုးလာမည့် ခလုတ်တစ်ခုကို ပြုလုပ်ပါ။

Задание 8

သင့်တွင် ရုပ်ပုံနှစ်ပုံ ရှိသည်။ စာမျက်နှာပေါ်တွင် img tag တစ်ခုနှင့် ခလုတ်နှစ်ခု ပြုလုပ်ပါ။ ပထမခလုတ်ကို နှိပ်လိုက်သောအခါ src attribute ထဲသို့ ပထမရုပ်ပုံသို့ လမ်းကြောင်းကို ရေးထည့်ပါ၊ ဒုတိယခလုတ်ကို နှိပ်လိုက်သောအခါတွင် ဒုတိယရုပ်ပုံသို့ လမ်းကြောင်းကို ရေးထည့်ပါ။