HTML DOM Element အတန်းစာရင်း
❮ Element Objectဥပမာ
အစိတ်အပိုင်းတစ်ခုသို့ "myStyle" အတန်းကို ထည့်ပါ-
element.classList.add("myStyle");
"myStyle" အတန်းကို အစိတ်အပိုင်းတစ်ခုမှ ဖယ်ရှားပါ-
element.classList.remove("myStyle");
ဒြပ်စင်တစ်ခုအတွက် အတန်းနှစ်ခုကြားတွင် ပြောင်းရန်-
element.classList.toggle("newStyle");
အောက်တွင် နောက်ထပ် ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
classList
ပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခု၏ CSS အတန်းအမည်များကို ပြန်ပေးသည် ။
classList
ပိုင်ဆိုင်မှုသည် DOMTokenList အရာဝတ္ထုကို ပြန်ပေးသည် ။
ပိုင်ဆိုင်မှုသည် ဖတ်ရန်သာဖြစ်သည်၊ သို့သော် classList
သင်သည် CSS အတန်းများကို ထည့်ရန် သို့မဟုတ် ဖယ်ရှားရန် add() နှင့် remove() နည်းလမ်းများကို သုံးနိုင်သည်။
မှတ်ချက်
ပစ္စည်း classList
သည် ဒြပ်စင်တစ်ခုပေါ်ရှိ CSS အတန်းများကို ထည့်ရန်၊ ဖယ်ရှားရန်နှင့် ပြောင်းရန် နှစ်ခုလုံးအတွက် အသုံးဝင်သည်။
ကိုလည်းကြည့်ပါ-
အထားအသို
element.classList
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
length | The number of classes in the list. This property is read-only. |
နည်းလမ်းများ
Method | Description |
add(class1, class2, ...) |
Adds one or more classes. |
contains(class) |
Returns true if an element has the class, otherwise false .
|
item(index) | Returns the class name with a specified index. Index starts at 0. Returns null if the index is out of range. |
remove(class1, class2, ...) | Removes one or more classes from an element. Removing a class that does not exist, does NOT throw an error. |
toggle(class, true|false) | Toggles between a class for an element. It removes the class and returns false .If the class does not exist, it adds the class and returns true .The optional second parameter is a boolean that forces the class to be added or removed, regardless of whether or not it already exists. The second parameter is not supported in Internet Explorer 11 or earlier. |
တန်ဖိုးကို ပြန်ပေးသည်။
Type | Description |
Object | A DOMTokenList. A list of the class names of an element. |
နောက်ထပ် ဥပမာများ
အစိတ်အပိုင်းတစ်ခုသို့ အတန်းများစွာကို ထည့်ပါ-
element.classList.add("myStyle", "anotherClass", "thirdClass");
အစိတ်အပိုင်းတစ်ခုမှ အတန်းများစွာကို ဖယ်ရှားပါ-
element.classList.remove("myStyle", "anotherClass", "thirdClass");
ဒြပ်စင်တွင် အတန်းအမည်မည်မျှရှိသည်-
let numb = element.classList.length;
"myDIV" ဒြပ်စင်၏အတန်းအမည်များကိုရယူပါ-
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
အစိတ်အပိုင်းတစ်ခု၏ ပထမတန်းစားကို ရယူပါ-
let className = element.classList.item(0);
ဒြပ်စင်တစ်ခုတွင် "myStyle" အတန်းရှိပါသလား။
let x = element.classList.contains("myStyle");
ဒြပ်စင်တစ်ခုတွင် "myStyle" အတန်းရှိပါက "အခြားClass" ကို ဖယ်ရှားပါ။
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
dropdown ခလုတ်တစ်ခုဖန်တီးရန် အတန်းများကြားတွင် ခလုတ်နှိပ်ပါ။
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
စေးကပ်နေသော လမ်းကြောင်းပြဘားတစ်ခု ဖန်တီးပါ-
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Browser ပံ့ပိုးမှု
element.classList
ဘရောက်ဆာအားလုံးတွင် ထောက်ခံသည်-
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 10-11 | Yes | Yes | Yes | Yes |
❮ Element Object