HTML DOMTokenList အမှတ်ပြန်ချက်

DOMTokenList

DOMTokenList အကြားသို့ အားလုံး အချက်အလက် လက္ခဏာ အစုအဝေး ဖြစ်သည်။

DOMTokenList ကို အကြိမ်ကြိမ် အစိတ်အပိုင်း ဖြင့် အခြေခံ အစိတ်အပိုင်း မှ အစတွင် အသုံးပြုသည်။

length အချက်အလက်DOMTokenList တွင် လက္ခဏာ အရာသွားသွား အရှိန် ပြန်လည် တင်ကြည့်သည်။

ဖော်ပြချက်HTML အရာဝတ္တု classList အချက်အလက်DOMTokenList ကို ကိုင်တွယ်သည်။

DOMTokenList အချက်အလက် နှင့် နည်းလမ်း

အမည် သုံးသပ်ချက်
add() တစ်ခုခုသော လက္ခဏာ ပေါင်းစု တစ်ခုခု စာရင်း သို့ ထပ်ထည့်ပေးသည်။
contains() စာရင်း တွင် အက်ဥပဒေ ရှိ သော် true ပြန်လည် တင်ကြည့်သည်။
entries() နေရာတွင် ကို/အစားအရေး ပေါင်းစု လိုက် အသုံးပြု အကြိမ်ကြိမ် အရာသွားသွား သတင်းစကား အရာသွားသွား ပြန်လည် တင်ကြည့်သည်။
forEach() 为列表中的每个令牌执行回调函数。
item() 返回指定索引处的令牌。
forEach() item()
keys() forEach()
item() keys()
length remove()
replace() supports()
toggle() အစားထိုး အချက်အလက် အကြား အစားထိုးပါ
value အချက်အလက် ဘဏ္ဍာရေး စက်မှု ကို အစားထိုးပါ
values() အစားထိုး အချက်အလက် ကို အစားထိုးပါ

အကျိုးသမား

နောက်ပိုင်း 1

"myStyle" အချက်အလက် ကို ထပ်ထည့်ပါ

element.classList.add("myStyle");

亲自试一试

နောက်ပိုင်း 2

"myStyle" အချက်အလက် ကို ဖယ်ရှားပါ

element.classList.remove("myStyle");

亲自试一试

နောက်ပိုင်း 3

"myStyle" ကို ဖွင့်နည်း နှင့် ပိတ်နည်း

element.classList.toggle("myStyle");

亲自试一试

ပြင်ဘက် ပို့ဆောင် အကျိုးသမား များ ပြတ်သက်ပါ

ဘဏ္ဍာရေး စက်မှု မဟုတ်

DOMTokenList သည် ဘဏ္ဍာရေး စက်မှု မဟုတ်

DOMTokenList သည် ဘဏ္ဍာရေး စက်မှု ကဲ့သို့ လို့တွေ့သည် သို့သော် အခြား သတ္တု မဟုတ်

DOMTokenList ကို အစားထိုးပါ အစားထိုးပါ

သို့သော် DOMTokenList ပေါ်မှ ဘဏ္ဍာရေး စက်မှု များ ကို အသုံးပြုရတော့ မရတာ push() သို့မဟုတ် pop() သို့မဟုတ် join()

အကျိုးသမား

နောက်ပိုင်း 1

အချက်အလက် သို့ အချက်အလက် ထပ်ထည့်ပါ

element.classList.add("myStyle", "anotherClass", "thirdClass");

亲自试一试

နောက်ပိုင်း 2

အချက်အလက် မှ အချက်အလက် ဖယ်ရှားပါ

element.classList.remove("myStyle", "anotherClass", "thirdClass");

亲自试一试

နောက်ပိုင်း 3

အချက်အလက် ကို မှတ်ချက်ထိုးပါ

let numb = element.classList.length;

亲自试一试

နောက်ပိုင်း 4

"myDIV" အချက်အလက် ကို မှတ်ချက်ထိုးပါ

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

亲自试一试

နောက်ပိုင်း 5

获取元素的第一个类：

let className = element.classList.item(0);

亲自试一试

例子 6

元素是否有 "myStyle" 类？

let x = element.classList.contains("myStyle");

亲自试一试

例子 7

如果元素有 "myStyle" 类，则删除 "anotherClass"：

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

亲自试一试

例子 8

在类之间切换，以创建下拉按钮：

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

亲自试一试

例子 9

创建粘性导航栏：

// 获取导航栏
const navbar = document.getElementById("navbar");
// 获取导航栏的偏移位置
const sticky = navbar.offsetTop;
// 当您到达其滚动位置时，将 sticky 类添加到导航栏
// 离开滚动位置时将其删除
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

亲自试一试