HTML id шинж чанар нь HTML элементэд өвөрмөц нэршил олгоход хэрэглэгддэг.
HTML баримт бичигт нэгээс илүү ижил id-тэй элемент байж болохгүй.
id шинж чанар ашиглах #
HTMLid шинж чанар нь HTML элементэд өвөрмөц нэршил олгоход хэрэглэгддэг. id шинж чанарын утга нь HTML дотор өвөрмөц байх ёстой.
Энэ нь JavaScript-т тухайн id-тэй элементэд хандах, удирдахад ашиглагддаг.
id шинж чанарын синтакс нь: чагт бичээд(#), дараагаар id нэрийг бичиж дууддаг. Тэгээд 2 хашилт авч дотор нь CSS кодоо бичнэ {}.
Дараах жишээн дээр <h1> элементэд “myHeader” гэсэн id өгсөн байна. Энэ<h1> элeмент нь толгой(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 нэр нь дундаа хоосон зайтай байж болохгүй.
ID болон CLASS шинж чанаруудын ялгаа #
Class шинж чанарыг 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> ID болон линк бүхий HTML хавчуурга(bookmarks) #
HTML хавчуурга нь уншигчдад вэб хуудасны тодорхой хэсэг рүү үсрэх боломжийг олгоход ашиглагддаг.
Хэрэв таны хуудас маш урт байвал хавчуурга нь ашигтай байж болно.
Хавчуурга ашиглахын тулд эхлээд хавчуургаа үүсгээд дараа нь холбоос нэмэх хэрэгтэй.
Дараа нь холбоос дээр дарахад хуудас нь хавчуургатай байрлал руу гүйнэ.
Нэгдүгээрт, id шинж чанар бүхий хавчуурга үүсгэх:
<h2 id="C4">Chapter 4</h2> Дараа нь хавчуургын холбоосыг (“Бүлэг 4 рүү үсрэх”) нэг хуудсан дээрээс нэмнэ үү.
<a href="#C4">Jump to Chapter 4</a> JavaScript-д id шинж чанар ашиглах #
idшинж чанарыг JavaScript-т тодорхой элементүүдийг зарим нэг үйлдэл хийлгэхэд ашиглаж болно.
JavaScript нь getElementById() аргаар тодорхой id бүхий элементэд хандах боломжтой:
Текстийг JavaScript ашиглан удирдахын тулдidшинж чанарыг ашиглана.
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script> Chapter Summary #
-
idшинж чанар нь тодорхой элементийг онцгойлход хэрэглэн. idшинж чанарын утга нь HTML-д онцгой байх ёстойidшинж чанар нь CSS болон Javascript-д тодорхой элементийг сонгох эсвэл загварчилхад хэрэглэгдэнэ-
idшинж чанарт өгөгдсөн утга буюу нэршил нь хаана ч ижилхэн бичигдэх ёстой idнь хавчуурга(bookmark) үүсгэхэд хэрэглэгддэг- Javascript дээр
idшинж чанартай элементийг дуудхадgetElementById()аргыг ашиглана
