HTML DOM Element className
❮ Element Objectဥပမာ
element တစ်ခုအတွက် class attribute ကို သတ်မှတ်ပါ-
element.className = "myStyle";
"myDIV" ၏ အတန်းရည်ညွှန်းချက်ကို ရယူပါ-
let value = document.getElementById("myDIV").className;
အတန်းအမည်နှစ်ခုကြားတွင် ပြောင်းရန်
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
အောက်တွင် နောက်ထပ် ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် className
ဒြပ်စင်တစ်ခု၏ class attribute ကို သတ်မှတ် သို့မဟုတ် ပြန်ပေးသည်။
ကိုလည်းကြည့်ပါ-
အထားအသို
className ပိုင်ဆိုင်မှုကို ပြန်ပေးပါ။
HTMLElementObject.className
className ပိုင်ဆိုင်မှုကို သတ်မှတ်ပါ-
HTMLElementObject.className = class
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
တန်ဖိုးကို ပြန်ပေးသည်။
Type | Description |
String | The class, or a space-separated list of classes, of an element |
နောက်ထပ် ဥပမာများ
ပထမ <div> ဒြပ်စင်၏ class attribute ကို ရယူပါ (ရှိပါက)
let value = document.getElementsByTagName("div")[0].className;
အတန်းများစွာဖြင့် အတန်းရည်ညွှန်းချက်ကို ရယူပါ-
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
ရှိပြီးသား အတန်းရည်ညွှန်းချက်ကို အသစ်တစ်ခုဖြင့် ထပ်ရေးပါ-
element.className = "newClassName";
ရှိပြီးသားတန်ဖိုးများကို ထပ်မရေးဘဲ အတန်းအသစ်များထည့်ရန် နေရာလွတ်နှင့် အတန်းအသစ်များကို ထည့်ပါ-
element.className += " class1 class2";
"myDIV" တွင် "myStyle" အတန်းရှိပါက၊ ဖောင့်အရွယ်အစားကို ပြောင်းပါ-
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
အကယ်၍ သင်သည် ဤစာမျက်နှာ၏ထိပ်မှ 50 pixels ကို ရွှေ့ပါက၊ အတန်း "test" ကို ပေါင်းထည့်သည်-
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Browser ပံ့ပိုးမှု
element.className
ဘရောက်ဆာအားလုံးတွင် ထောက်ခံသည်-
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ Element Object