HTML id အချက်

HTML id အချက်အလက်သည် အေဂျင်စီ အရာအတွက် အမည်တစ်ခု သတ်မှတ်ပြီးပြီ。

အေဂျင်စီ အချက်အလက်တွင် အတိုင်းအတာ အချက်အလက် အတစ်ခု မှ သာ ရှိနိုင်ပါ။

id အချက်အလက် အသုံးပြုခြင်း

id အချက်အလက်သည် အေဂျင်စီ အရာ၏ ကတုတ်ကြီး ကို သတ်မှတ်ပြီးပြီ。 id အချက်အလက်၏ အသုံးပြုခြင်း HTML ကုတ္တိတွင် ကို အနှစ်တရာ ဖြစ်ပါသည်。

id အချက်အလက်သည် အေဂျင်စီ စကာတင်တွင် အချက်အလက်များ အတွက် အသိအမှတ်ပြုသည်။ ဂျေဆာကက် လည်း အမည်တစ်ခု ရှိသော အရာများ ကို ထိန်းချုပ် ရန် အသုံးပြုနိုင်သည်。

id ရုပ်စံသည် အရာတွင် # မှ စတင်၍ အမည်တစ်ခု ဖြင့် ရုပ်စံကို ဖော်ပြပြီး အက်စ်အက်စ်အက် အချက်အလက်များ အပါအဝင် အချက်အလက်များ ကို {} အထိပ်တွင် ကို သတ်မှတ်ပြီးပြီ。

下面的例子中我们有一个 <h1> အကြောင်းအရာ အတွက် ကုတ်အမည် "myHeader" ကို လိုင်းချိုးသော <h1> အစီအစဉ် head ပိုင်း အတွင်း အသုံးပြုသော #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>

ကျွန်ုပ်ကိုယ်တိုင် စမ်းသပ်ပါ

ဖော်ပြချက်:id ကုတ်အမည် သည် အချိန်ကြား အက်ဖ်လ်ကင်္ဂါ အက်ဖ်လ်ကင်္ဂါ အား ကွဲခွဲပါ။

ဖော်ပြချက်:id ကုတ်အမည် သည် အနည်းဆုံး အကြမ်း ၁ အချက် ပါရှိရ ပြီး အမှတ်အသား အကြား အကွဲခွဲသည် မ ပါရှိဘူး။

Class နှင့် ID အကျဉ်းချုပ်

အတူတူ အကြောင်းအရာ အမျိုးမျိုး ကို အသုံးပြုနိုင်သော HTML အကြောင်းအရာ နှင့် ကုတ်အမည် အမျိုးမျိုး ကို အသုံးပြုနိုင်သော အကြောင်းအရာ တစ်ခု သာ အသုံးပြုနိုင်သည်။

အမှုထမ်း

<style>
/* "myHeader" ကုတ်အမည် ကို အသုံးပြုသော အကြောင်းအရာ အတွက် အေျာင်းရွက် */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* အကြောင်းအရာ အမျိုးမျိုး ကို အသုံးပြုသော "city" အကြောင်းအရာ အတွက် အေျာင်းရွက် */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- ကုတ်အမည် ကြီးကြပ်သော အကြောင်းအရာ -->
<h1 id="myHeader">My Cities</h1>
<!-- အတူတူ အကြောင်းအရာ အမျိုးမျိုး ကို အသုံးပြုသော အသုံးအမည်တူသော အကြောင်းအရာ -->
<h2 class="city">လန်ဒန်</h2>
<p>လန်ဒန် က အင်္ဂလန်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။</p>
<h2 class="city">ပြင်း</h2>
<p>ပြင်း က ဝရိုက်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။</p>
<h2 class="city">တိုကျို</h2>
<p>တိုကျို က ဂျပန်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။</p>

ကျွန်ုပ်ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းအရာကျွန်ုပ်၏ CSS ပြည်သီးသီး အကြောင်းကြားချက်များ အတွက် အခြေခံ CSS သတင်းကြည်းချိန်းကို သိရှိပါ။

HTML ဘေးလုံး ကို ID နှင့် လိုင်းချိုး ဖြင့် လုပ်ဆောင်သည်

HTML ဘေးလုံး က စာမျက်နှာ ကို အခြား အချိန် ကို လျှော့လွှဲရန် အသုံးပြုသည်။

စာမျက်နှာ က အလွန် အကျယ်ရှိလျှင် ဘေးလုံး အသုံးပြုရန် အသုံးဝင်သည်။

ဘေးလုံး ကို အသုံးပြုရန် သင်သည် ပထမပေါင်း ကို ဖွဲ့စည်းပေးရ ပြီး ထို ဘေးလုံး အတွက် လိုင်းချိုး ကို ထပ်ပေးရသည်။

ပြီးတော့ ခုံးလုံး တစ်ခု ကို ဖိတ်သိမ်းလျှင် စာမျက်နှာ က ဘေးလုံး နေရာ ကို လျှော့လွှဲသည်။

အမှုထမ်း

首先，用 id 属性创建书签：

第四章

然后，在同一张页面中，向这个书签添加一个链接（“跳转到第四章”）：

အမှုထမ်း

跳转到第四章

ကျွန်ုပ်ကိုယ်တိုင် စမ်းသပ်ပါ

或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）：

Jump to Chapter 4

在 JavaScript 中使用 id 属性

JavaScript 也可以使用 id 属性为特定元素执行某些任务。

JavaScript က အသုံးပြုနိုင် getElementById() id အချက်အလက် ကို အသုံးပြုခြင်း

အမှုထမ်း

id အချက်အလက် ကို အသုံးပြုခြင်း ဖြင့် JavaScript က အခမ်းအနား အတွက် အသုံးပြုပါ

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

ကျွန်ုပ်ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းအရာကျွန်ုပ်၏ HTML JavaScript ယခုအချိန်တွင် သို့မဟုတ် ကျွန်ုပ်၏ JavaScript ပြည်သီးသီး JavaScript က အသုံးပြုခြင်း

တစ်ခုတည်းသော အကျဉ်းချုပ်

  • id အချက်အလက် က အခွင့်အရေး သတ်မှတ်ခြင်း
  • id HTML အခမ်းအနား တွင် အချက်အလက် အရာ သာလွန် ကျယ်ပြီး ကျွန်ုပ် ကိုယ်စားပြုမှု
  • CSS နှင့် JavaScript က အသုံးပြုနိုင် id အချက်အလက် က အကိုင်းကြား သတ်မှတ်နိုင်
  • id အချက်အလက် အရာ အကြီးအကျယ် ကျယ်ပြီး ကျွန်ုပ် ကိုယ်စားပြုမှု
  • id အချက်အလက် က အတိုက်လက်တင် အတွက် အသုံးပြုနိုင်
  • JavaScript က အသုံးပြုနိုင် getElementById() အချက်အလက် အတွက် ကိုယ်စားပြုမှု