HTML id атрибут нь HTML элементийн давтагдашгүй id (identifier)-г тодорхойлоход ашиглагддаг.
HTML баримт бичигт ижил id-тай нэгээс олон элемент байж болохгүй.
id Атрибут #
id атрибут нь HTML элементийн цор ганц (давтагдашгүй) id-г тодорхойлдог. id атрибутын утга нь HTML баримт бичиг дотроо давтагдахгүй байх ёстой.
id атрибутыг загварын хуудас (style sheet) дахь тодорхой загварын тунхаглалыг заахад ашигладаг. Мөн JavaScript ашиглан тодорхой id бүхий элементэд хандах, өөрчлөхөд ашигладаг.
Id-ийн синтакс (бичиглэлийн дүрэм) нь: чагт тэмдэг (#) бичээд, араас нь id-ийн нэрийг бичнэ. Дараа нь буржгар хаалт {} дотор CSS шинж чанаруудыг тодорхойлно.
Дараах жишээнд бид “myHeader” гэсэн id нэртэй <h1> элементтэй байна. Энэ <h1> элемент нь толгой хэсэгт байрлах #myHeader загварын тодорхойлолтын дагуу загварчлагдах болно:
Жишээ
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Миний гарчиг</h1>
</body>
</html>
Тэмдэглэл: Id-ийн нэр нь том, жижиг үсгийн ялгаатай!
Тэмдэглэл: Id-ийн нэр нь дор хаяж нэг тэмдэгт агуулсан байх ёстой, тоогоор эхэлж болохгүй, мөн хоосон зай (space, tab гэх мэт) агуулж болохгүй.
Class ба ID-ийн ялгаа #
Class-ын нэрийг олон HTML элемент ашиглаж болох бол id-ийн нэрийг хуудас доторх зөвхөн нэг HTML элемент ашиглах ёстой:
Жишээ
HTML
<style>
/* "myHeader" id-тай элементийг загварчлах */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* "city" class-ын нэртэй бүх элементийг загварчлах */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h1 id="myHeader">Миний хотууд</h1>
<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 Хичээл-ээс CSS-ийн талаар илүү ихийг сурах боломжтой.
ID болон Холбоос ашигласан HTML Хавчуурга (Bookmarks) #
HTML хавчуурга нь уншигчдад веб хуудасны тодорхой хэсэг рүү үсрэх (шууд очих) боломжийг олгодог.
Хэрэв таны хуудас маш урт бол хавчуурга нь хэрэгтэй байж болно.
Хавчуурга ашиглахын тулд та эхлээд үүнийг үүсгэж, дараа нь түүн рүү холбоос нэмэх ёстой.
Дараа нь холбоос дээр дарах үед хуудас хавчуургатай байршил руу гүйлгэх болно.
Жишээ
Эхлээд id атрибутаар хавчуурга үүсгэнэ:
HTML
<h2 id="C4">4-р Бүлэг</h2>
Дараа нь нэг хуудас дотроо хавчуурга руу (“4-р Бүлэг рүү үсрэх”) холбоос нэмнэ:
Жишээ
HTML
<a href="#C4">4-р Бүлэг рүү үсрэх</a>
Эсвэл өөр хуудаснаас хавчуурга руу (“4-р Бүлэг рүү үсрэх”) холбоос нэмнэ:
HTML
<a href="html_demo.html#C4">4-р Бүлэг рүү үсрэх</a>
JavaScript дотор id Атрибутыг ашиглах нь #
id атрибутыг мөн JavaScript ашиглан тухайн элементэд тодорхой үүрэг даалгавар гүйцэтгэхэд ашиглаж болно.
JavaScript нь getElementById() аргын тусламжтайгаар тодорхой id бүхий элементэд хандах боломжтой:
Жишээ
JavaScript ашиглан текстийг өөрчлөхийн тулд id атрибутыг ашиглах нь:
HTML
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Өдрийг сайхан өнгөрүүлээрэй!";
}
</script>
Зөвлөмж: JavaScript-ийг HTML JavaScript бүлгээс эсвэл манай JavaScript Хичээл-ээс судална уу.
Бүлгийн Дүгнэлт #
idатрибут нь HTML элементийн давтагдашгүй id-г тодорхойлоход ашиглагддаг.idатрибутын утга нь HTML баримт бичиг дотроо давтагдашгүй байх ёстой.idатрибутыг CSS болон JavaScript нь тодорхой элементийг загварчлах/сонгоход ашигладаг.idатрибутын утга нь том, жижиг үсгийн ялгаатай.idатрибутыг мөн HTML хавчуурга үүсгэхэд ашигладаг.- JavaScript нь
getElementById()аргын тусламжтайгаар тодорхой id бүхий элементэд хандах боломжтой.
