HTML id атрибут
HTML элемент дотор оо id атрибут нь дахин давтагдашгүй байна.
CSS болон JavaScript нь id атрибутын утгыг ашиглан тодорхой даалгаврыг гүйцэтгэж болно.
СSS-д id атрибутыг # тэмдэгтийн араас элементийн нэрийг өгнө.
Жишээлбэл:
CSS-ийн style элементэд id атрибутыг хэрэглэж үзье.
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
#firstID {
background-color: green;
color: white;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="firstID">Миний эхний ID атрибут</h1>
</body>
</html>
Зөвлөмж: id атрибутыг дурын HTML элементэд ашиглаж болно.
Анхаар: id атрибут нь том, жижиг үсгийг ялгаатай гэж ойлгоно.
Анхаар: id атрибутад багадаа нэг тэмдэгт байх бөгөөд хоосон зай авч болохгүй.
Class болон Id-н ялгаа
Класс нь хэд хэдэн элементэд хэрэглэж байхад, HTML элементдэх дан элемент бүр нь дахин давтагдашгүй id-тай байна.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
/* "firstID" id тай элемент */
#firstID. {
background-color: green;
color: white;
padding: 30px;
text-align: center;
}
/* "duureg" нэртэй бүх классыг загварчилах */
.duureg {
background-color: orange;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="firstID">Улаанбаатар хотын төвийн 3-н дүүрэг</h1>
<p id="duureg">Хан-Уул дүүрэг</p>
<p id="duureg">Сүхбаатар дүүрэг</p>
<p id="duureg">Сонгино хайрхан дүүрэг</p>
</body>
</html>
Зөвлөмж: id атрибутын талаар илүү их манай СSS сурцгаая А-Я хичээлээс үзээрэй.
JavaScrpit-д Id атрибутыг ашиглах
JavaScrpit нь getElementById() функцийн тусламжтай тодорхой ID тай элементэд нэвтрэх боломжтой.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="firstID">Өнөөдөр цагаан сар, Монгол үндэсний баяр</h1>
<button onclick="medeelelSolih()">Текст солих</button>
<script>
function medeelelSolih() {
document.getElementById("firstID").innerHTML = "Золгохыг хориглоно! КОРАНО Вирус!";
}
</script>
</body>
</html>
Сэтгэгдэлүүд
