HTML ID ရည်ညွှန်းချက်
idHTML ဒြပ်စင်အတွက် ထူးခြားသော ID တစ်ခုကို သတ်မှတ်ရန် HTML ရည်ညွှန်းချက်ကို အသုံးပြုသည် ။
HTML စာရွက်စာတမ်းတစ်ခုတွင် တူညီသော ID ပါသော ဒြပ်စင်တစ်ခုထက်ပို၍ မရပါ။
id Attribute ကိုအသုံးပြုခြင်း။
ရည်ညွှန်းချက် သည် idHTML ဒြပ်စင်အတွက် ထူးခြားသော ID ကို သတ်မှတ်ပေးသည်။ ရည်ညွှန်းချက် ၏တန်ဖိုး id
သည် HTML စာရွက်စာတမ်းအတွင်း ထူးခြားနေရပါမည်။
စတိုင်စာရွက် ရှိ idသီးခြားစတိုင်ကြေငြာချက်ကို ညွှန်ပြရန်အတွက် ရည်ညွှန်းချက်အား အသုံးပြုသည်။ တိကျသော id ဖြင့် ဒြပ်စင်အား ဝင်ရောက်ပြီး စီမံခန့်ခွဲရန် ၎င်းကို JavaScript မှလည်း အသုံးပြုပါသည်။
id အတွက် syntax သည်- hash စာလုံး (#) ကို ရေးပြီး နောက်တွင် id အမည်ဖြင့် ရေးပါ။ ထို့နောက်၊ curly braces {} အတွင်းရှိ CSS ဂုဏ်သတ္တိများကို သတ်မှတ်ပါ။
အောက်ပါဥပမာတွင် <h1>ကျွန်ုပ်တို့တွင် id အမည် "myHeader" ကိုညွှန်ပြသည့်ဒြပ်စင်တစ်ခုရှိသည်။ ဤ <h1>
ဒြပ်စင်ကို #myHeader
ဦးခေါင်းကဏ္ဍရှိ စတိုင်အဓိပ္ပါယ်သတ်မှတ်ချက်အရ ပုံစံသတ်မှတ်ပေးမည်-
ဥပမာ
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
မှတ်ချက်- အိုင်ဒီအမည်သည် အသေးအဖွဲဖြစ်သည်။
မှတ်ချက်- အိုင်ဒီအမည်တွင် အနည်းဆုံး စာလုံးတစ်လုံး ပါရှိရမည်ဖြစ်ပြီး နံပါတ်တစ်ခုဖြင့် မစတင်နိုင်ဘဲ နေရာလွတ်များ (နေရာလွတ်များ၊ တက်ဘ်များ စသည်တို့) မပါဝင်ရပါ။
Class နှင့် ID ကွာခြားချက်
အတန်းအမည်ကို HTML ဒြပ်စင်အများအပြားဖြင့် အသုံးပြုနိုင်ပြီး id အမည်ကို စာမျက်နှာအတွင်းရှိ HTML ဒြပ်စင်တစ်ခုမှသာ အသုံးပြုရပါမည်-
ဥပမာ
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
အကြံပြုချက်- ကျွန်ုပ်တို့၏ CSS Tutorial တွင် CSS အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည် ။
ID နှင့် လင့်ခ်များပါရှိသော HTML Bookmarks
စာဖတ်သူများကို ဝဘ်စာမျက်နှာတစ်ခု၏ သီးခြားအစိတ်အပိုင်းများသို့ ခုန်ကူးနိုင်စေရန်အတွက် HTML လိပ်စာများကို အသုံးပြုသည်။
သင့်စာမျက်နှာသည် အလွန်ရှည်ပါက စာညှပ်များသည် အသုံးဝင်နိုင်သည်။
စာညှပ်တစ်ခုအသုံးပြုရန်၊ ၎င်းကို ဦးစွာဖန်တီးပြီး ၎င်းတွင် လင့်ခ်တစ်ခုထည့်ရပါမည်။
ထို့နောက် လင့်ခ်ကို နှိပ်လိုက်သောအခါ၊ စာမျက်နှာသည် စာညှပ်ဖြင့် တည်နေရာသို့ ရွှေ့သွားမည်ဖြစ်သည်။
ဥပမာ
idပထမဦးစွာ attribute ဖြင့် bookmark တစ်ခုဖန်တီး ပါ။
<h2 id="C4">Chapter 4</h2>
ထို့နောက် တူညီသောစာမျက်နှာအတွင်းမှ စာညှပ် ("အခန်း 4 သို့သွားရန်") လင့်ခ်တစ်ခုကို ထည့်ပါ။
ဥပမာ
<a href="#C4">Jump to Chapter 4</a>
သို့မဟုတ် အခြားစာမျက်နှာမှ စာညှပ် ("အခန်း ၄ သို့သွားရန်") လင့်ခ်တစ်ခု ထည့်ပါ-
<a href="html_demo.html#C4">Jump to Chapter 4</a>
JavaScript တွင် id Attribute ကိုအသုံးပြုခြင်း။
အဆိုပါ idသီးခြားဒြပ်စင်အတွက် လုပ်ဆောင်စရာအချို့ကို လုပ်ဆောင်ရန် ရည်ညွှန်းချက်ကိုလည်း JavaScript မှလည်း အသုံးပြုနိုင်သည်။
getElementById()JavaScript သည် နည်းလမ်း ဖြင့် တိကျသော ID တစ်ခုဖြင့် အစိတ်အပိုင်းတစ်ခုကို ဝင်ရောက်နိုင်သည် -
ဥပမာ
idစာသားကို JavaScript ဖြင့် စီမံခန့်ခွဲရန် ရည်ညွှန်းချက်ကို သုံး ပါ-
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
အကြံပြုချက်- HTML JavaScript အခန်းတွင် JavaScript ကိုလေ့လာ ပါ၊ သို့မဟုတ် ကျွန်ုပ်တို့၏ JavaScript Tutorial တွင် လေ့လာ ပါ။
အခန်းအကျဉ်းချုပ်
idHTML ဒြပ်စင်တစ်ခုအတွက် ထူးခြားသော ID တစ်ခုကို သတ်မှတ်ရန် attribute ကို အသုံးပြုသည် ။- ရည်ညွှန်းချက် ၏တန်ဖိုး
idသည် HTML စာရွက်စာတမ်းအတွင်း ထူးခြားနေရပါမည်။ - သီးခြား
idဒြပ်စင်တစ်ခုကို ပုံစံ/ရွေးချယ်ရန် ရည်ညွှန်းချက်အား CSS နှင့် JavaScript တို့က အသုံးပြုသည်။ - ရည်ညွှန်းချက် ၏တန်ဖိုး
idသည် အသေးအဖွဲဖြစ်သည် ။ idအရည်အချင်းကို HTML လိပ်စာများဖန်တီးရန်လည်း အသုံးပြုပါသည် ။getElementById()JavaScript သည် နည်းလမ်း ဖြင့် တိကျသော id တစ်ခုဖြင့် ဒြပ်စင်တစ်ခုကို ဝင်ရောက်နိုင်သည်။