HTML class атрибут нь HTML элементэд ангилал (class) тодорхойлоход ашиглагддаг. Олон HTML элементүүд нэг ижил class-ыг хуваалцаж (ашиглаж) болно.
class Атрибут #
class атрибутыг ихэвчлэн загварын хуудас (style sheet) дахь class-ын нэрийг заахад ашигладаг. Мөн JavaScript ашиглан тодорхой class-ын нэртэй элементүүдэд хандах, өөрчлөхөд ашиглаж болно.
Дараах жишээнд бид “city” гэсэн утга бүхий class атрибуттай гурван <div> элементтэй байна. Гурван <div> элемент бүгд толгой (head) хэсэгт байрлах .city загварын тодорхойлолтын дагуу ижил загварчлагдах болно:
Жишээ
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Дараах жишээнд бид “note” гэсэн утга бүхий class атрибуттай хоёр <span> элементтэй байна. Хоёр <span> элемент хоёулаа толгой хэсэгт байрлах .note загварын тодорхойлолтын дагуу ижил загварчлагдах болно:
Жишээ
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Зөвлөмж:
classатрибутыг дурын HTML элемент дээр ашиглаж болно.
Тэмдэглэл: Class-ын нэр нь том, жижиг үсгийн ялгаатай!
Зөвлөмж: Та манай CSS Хичээл-ээс CSS-ийн талаар илүү ихийг сурах боломжтой.
Class бичих синтакс #
Class үүсгэхийн тулд; цэг (.) тэмдэг тавиад, араас нь class-ын нэрийг бичнэ. Дараа нь буржгар хаалт {} дотор CSS шинж чанаруудыг тодорхойлно:
Жишээ
“city” нэртэй class үүсгэх:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
Олон Class ашиглах #
HTML элементүүд нь нэгээс олон class-д хамааралтай байж болно. Олон class тодорхойлохын тулд class-ын нэрсийг зайгаар тусгаарлана, ж.нь: <div class="city main">. Элемент нь заасан бүх class-ын дагуу загварчлагдах болно.
Дараах жишээнд эхний <h2> элемент нь city class болон main class-ын аль алинд нь хамаарах бөгөөд хоёр class-ын CSS загварыг хоёуланг нь авах болно:
Жишээ
HTML
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Өөр өөр элементүүд ижил Class-ыг хуваалцаж болно #
Өөр өөр HTML элементүүд ижил class-ын нэрийг зааж болно. Дараах жишээнд <h2> болон <p> хоёулаа “city” class-ыг зааж байгаа бөгөөд ижил загварыг хуваалцах болно:
Жишээ
HTML
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
JavaScript дотор class Атрибутыг ашиглах нь #
Class-ын нэрийг мөн JavaScript ашиглан тодорхой элементүүдэд үйлдэл гүйцэтгэхэд ашиглаж болно. JavaScript нь getElementsByClassName() аргын тусламжтайгаар тодорхой class-ын нэртэй элементүүдэд хандах боломжтой:
Жишээ
“city” class-ын нэртэй бүх элементийг нуухын тулд товчлуур дээр дарна уу:
HTML
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Хэрэв та дээрх жишээний кодыг ойлгохгүй байвал санаа зовох хэрэггүй. Та JavaScript-ийн талаар манай HTML JavaScript бүлгээс дэлгэрэнгүй үзэх эсвэл манай JavaScript Хичээл-ийг судлах боломжтой.
Бүлгийн Дүгнэлт #
- HTML
classатрибут нь элементэд нэг буюу хэд хэдэн class-ын нэрийг тодорхойлдог. - Class-уудыг CSS болон JavaScript нь тодорхой элементүүдийг сонгох, хандахад ашигладаг.
classатрибутыг дурын HTML элемент дээр ашиглаж болно.- Class-ын нэр нь том, жижиг үсгийн ялгаатай.
- Өөр өөр HTML элементүүд ижил class-ын нэрийг зааж болно.
- JavaScript нь
getElementsByClassName()аргын тусламжтайгаар тодорхой class-ын нэртэй элементүүдэд хандах боломжтой.
