HTML class Attribute
HTML အင်္ဂါရပ်တစ်ခုအတွက် အတန်းတစ်ခုကို သတ်မှတ်ရန် HTML class
ရည်ညွှန်းချက်ကို အသုံးပြုသည်။
HTML အစိတ်အပိုင်းများစွာသည် တူညီသောအတန်းကို မျှဝေနိုင်သည်။
class Attribute ကိုအသုံးပြုခြင်း။
class
စတိုင်စာရွက်ရှိ အတန်းအမည်ကို ညွှန်ပြရန် attribute ကို မကြာခဏအသုံးပြုသည် ။ သတ်မှတ်ထားသော အတန်းအမည်ဖြင့် ဒြပ်စင်များကို ဝင်ရောက် ကိုင်တွယ် စီမံရန် JavaScript မှလည်း ၎င်းကို အသုံးပြုနိုင်သည်။
အောက်ပါဥပမာတွင် ကျွန်ုပ်တို့တွင် "city" တန်ဖိုးရှိသော attribute သုံးခု <div>
ရှိသည် class
။ အစိတ်အပိုင်း သုံးခုစလုံး
ကို ဦးခေါင်းအပိုင်းရှိ စတိုင်အဓိပ္ပါယ်သတ်မှတ်ချက် <div>
အရ အညီအမျှ ပုံစံချထားမည်-.city
ဥပမာ
<!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>
အောက်ဖော်ပြပါ ဥပမာတွင် ကျွန်ုပ်တို့တွင် "မှတ်စု" တန်ဖိုးရှိသော attribute နှစ်ခု <span>
ရှိသည် class
။ အစိတ်အပိုင်း နှစ်ခုစလုံး
သည် ခေါင်းပိုင်းအပိုင်းရှိ စတိုင်အဓိပ္ပါယ်သတ်မှတ်ချက် <span>
အရ အညီအမျှ ပုံစံချထားမည် -.note
ဥပမာ
<!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 ဒြပ်စင်တွင်မဆို အသုံးပြုနိုင်ပါသည်။
မှတ်ချက်- အတန်းအမည်သည် စာလုံးအကြီးအသေးဖြစ်သည်။
အကြံပြုချက်- ကျွန်ုပ်တို့၏ CSS Tutorial တွင် CSS အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည် ။
အတန်းအတွက် Syntax
အတန်းတစ်ခုဖန်တီးရန်; ကာလတစ်ခု (.) စာလုံးကို ရေးပြီး နောက်တွင် အတန်းအမည်တစ်ခု ရေးပါ။ ထို့နောက်၊ curly braces {} အတွင်းရှိ CSS ဂုဏ်သတ္တိများကို သတ်မှတ်ပါ-
ဥပမာ
"မြို့" အမည်ရှိ အတန်းတစ်ခုကို ဖန်တီးပါ-
<!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>
အတန်းမျိုးစုံ
HTML ဒြပ်စင်များသည် class တစ်ခုထက်ပို၍ သက်ဆိုင်ပါသည်။
အတန်းများစွာကို သတ်မှတ်ရန်၊ အတန်းအမည်များကို နေရာလွတ်တစ်ခုဖြင့် ပိုင်းခြားပါ၊ ဥပမာ <div class="city main">။ သတ်မှတ်ထားသော အတန်းအားလုံးအတိုင်း အစိတ်အပိုင်းကို ပုံစံချပါမည်။
အောက်ပါဥပမာတွင်၊ ပထမ <h2>
ဒြပ်စင်သည် class နှစ်ခုလုံးနှင့် class မှသက်ဆိုင်ပြီး
city
class main
နှစ်ခုစလုံးမှ CSS styles ကိုရလိမ့်မည်-
ဥပမာ
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
မတူညီသောဒြပ်စင်များသည် တူညီသောအတန်းကိုမျှဝေနိုင်သည်။
မတူညီသော HTML အစိတ်အပိုင်းများသည် တူညီသောအတန်းအမည်ကို ညွှန်ပြနိုင်သည်။
အောက်ပါဥပမာတွင်၊ နှစ်ခုလုံး
သည် "မြို့" အတန်းကိုညွှန်ပြပြီး တူညီသောပုံစံကို မျှဝေပါမည် <h2>
-<p>
ဥပမာ
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
JavaScript တွင် class Attribute ကိုအသုံးပြုခြင်း။
သတ်မှတ်ထားသော ဒြပ်စင်များအတွက် အချို့သောလုပ်ဆောင်စရာများကို လုပ်ဆောင်ရန် အတန်းအမည်ကိုလည်း JavaScript မှလည်း အသုံးပြုနိုင်သည်။
JavaScript သည် getElementsByClassName()
နည်းလမ်းဖြင့် သီးခြားအတန်းအမည်တစ်ခုဖြင့် အစိတ်အပိုင်းများကို ဝင်ရောက်ကြည့်ရှုနိုင်သည်-
ဥပမာ
အတန်းအမည် "city" ဖြင့် အစိတ်အပိုင်းအားလုံးကို ဝှက်ထားရန် ခလုတ်ကို နှိပ်ပါ။
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
အပေါ်က ဥပမာမှာပါတဲ့ ကုဒ်ကို နားမလည်ရင် စိတ်မပူပါနဲ့။
ကျွန်ုပ်တို့၏ HTML JavaScript အခန်းတွင် JavaScript အကြောင်း ပိုမိုလေ့လာနိုင်လိမ့်မည် သို့မဟုတ် ကျွန်ုပ်တို့၏ JavaScript ကျူတိုရီရယ် ကို လေ့လာနိုင်ပါသည် ။
အခန်းအကျဉ်းချုပ်
- HTML
class
ရည်ညွှန်းချက်သည် ဒြပ်စင်တစ်ခုအတွက် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော အတန်းအမည်များကို သတ်မှတ်သည်။ - သီးခြားဒြပ်စင်များကို ရွေးချယ်၍ ဝင်ရောက်အသုံးပြုရန် အတန်းများကို CSS နှင့် JavaScript တို့က အသုံးပြုပါသည်။
class
ရည်ညွှန်းချက်ကို မည်သည့် HTML ဒြပ်စင်တွင်မဆို အသုံးပြုနိုင်ပါသည် ။- အတန်းအမည်သည် စာလုံးအကြီးအသေးဖြစ်သည်။
- မတူညီသော HTML အစိတ်အပိုင်းများသည် တူညီသောအတန်းအမည်ကို ညွှန်ပြနိုင်သည်။
- JavaScript သည်
getElementsByClassName()
method ဖြင့် သီးခြား class အမည်တစ်ခုဖြင့် အစိတ်အပိုင်းများကို ဝင်ရောက်နိုင်သည်။