HTML Класс атрибут /Class/
HTML-д класс атрибут нь ижил загвартай элементүүдийн загварыг тодорхойлдог. CSS-д классыг тодорхойлохдоо (.) тэмдэгтийн араас классын нэрийг бичнэ.
Энд нэг ижил загвартай хоёр <div> элементээр жишээ авч үзье.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
.sambar {
background-color: green;
color: white;
margin: 15px;
padding: 15px;
}
</style>
</head>
<body>
<div class="sambar">
<h1>Хан-Уул дүүрэг</h1>
<p>Хүн амын тоо 168 мянга</p>
</div>
<div class="sambar">
<h1>Сүхбаатар дүүрэг</h1>
<p>Хүн амын тоо 146 мянга</p>
</div>
</body>
</html>
Inline элементэд класс атрибутын хэрэглээ
class атрибутыг inline элементэд хэрэглэж болно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
span.zurwas {
background-color: green;
font-size: 110%;
color: white;
}
</style>
</head>
<body>
<h1>Энэ бол <span class="zurwas">гарчиг</span> </h1>
<p>Хүн амын тоо <span class="zurwas">168</span> мянга</p>
</body>
</html>
Зөвлөмж: Классыг HTML-н бүх элементэд ашиглаж болно.
Тэмдэглэл: Класст том, жижиг үсэг хамааралтай тул жижгээр бичнэ үү.
Multiple Classes
HTML класс нь нэгээс олон утга авч болно. Нэгээс олон утгыг авахдаа классын нэр хооронд хоосон зай авна.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
.zurwas {
background-color: green;
padding: 15px;
color: white;
}
.garchig {
text-align: center;
}
</style>
</head>
<body>
<h1 class="zurwas garchig">Энэ бол гарчиг</h1>
<h2 class="zurwas">Энэ бол гарчиг2</h2>
<h2 class="zurwas">Энэ бол гарчиг2</h2>
</body>
</html>
Жишээн дээр h1 нь "zurwas" болон "garchig" класст хаарч байгаа бол h2 нь зөвхөн "zurwas"класст хамаарч байгааг анзаарна уу.
Хоёр өөр tag нэг классыг ашиглаж болно
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
.zurwas {
background-color: green;
padding: 15px;
color: white;
}
</style>
</head>
<body>
<h1 class="zurwas">Энэ бол гарчиг</h1>
<p class="zurwas">Энэ бол догол мөр</p>
</body>
</html>
Javascript-д Класс атрибутыг ашиглах
Классын нэрийг ашиглан Javascript-ийн тодорохой даалгаварыг гүйцэтгэж болно.
getElementsByClassName() функцийг ашиглан тодорхой класст заасан нэрээр хандах боломжтой байдаг.
Жишээлбэл:
Хэрэглэгч товчлуур дээр дархад "zurwas" гэсэн нэртэй бүх классыг нууж болно.
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
.zurwas {
background-color: green;
padding: 15px;
color: white;
}
</style>
</head>
<body>
<button onclick="myFunc()">Нуух товчs</button>
<h1 class="zurwas">Энэ бол гарчиг</h1>
<p>Энэ бол догол мөр</p>
<h1 class="zurwas">Энэ бол гарчиг</h1>
<p>Энэ бол догол мөр</p>
<h1 class="zurwas">Энэ бол гарчиг</h1>
<p>Энэ бол догол мөр</p>
<script>
function myFunc() {
var x = document.getElementsByClassName("zurwas");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Магадгүй та Javascript-г мэддэггүй байж болно. Бид тун удахгүй цогц хичээлийг оруулах болно.
Сэтгэгдэлүүд
