HTML DOM Element classList 属性

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

classList ປະສົມປະສານວິທີການກັບຊະນິດນຳມາສະແດງຂອງປະກອບອາກາດ。

classList ປະສົມປະສານວິທີການກັບຄຳນວຍຫຼັກ

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ເພີ່ມ "myStyle" ຈາກປະກອບອາກາດ:

const list = element.classList;
list.add("myStyle");

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 2

ລຶບ "myStyle" ຈາກປະກອບອາກາດ:

const list = element.classList;
list.remove("myStyle");

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 3

ປ່ຽນວິທີການເປີດ/ປິດ "myStyle":

const list = element.classList;
list.toggle("myStyle");

ທົດລອງເອງຂອງທ່ານ

ຄຳແນະນຳ:ມີຫຼາຍຄວາມຈິງທີ່ພິມຢູ່ບ່ອນດ້ານລຸ່ມຂອງເວັບໄຊ。

ຂອບເຂດຂອງວິທີການ

element.classList

ກັບຄືນຄຳນວຍຫຼັກ DOMTokenList。

ຊະນິດ ການອະທິບາຍ
ໂອບເບັດ DOMTokenList。ລາຍການຊະນິດນຳມາສະແດງຊະນິດນຳມາສະແດງຂອງປະກອບອາກາດ。

ຄຳເຫັນ:ຄຳເຫັນ: classList 属性ແມ່ນຜູ້ອ່າງພຽງແຕ່ບໍ່ສາມາດດຳເນີນການອີກແຕ່ທ່ານສາມາດໃຊ້ວິທີການທີ່ລົງຄວາມລະບຸນີ້ເພື່ອເພີ່ມ, ປ່ຽນຫຼືລຶບຊະນິດ CSS ວິທີການຈາກລາຍການ。

classList 属性 ແລະ ວິທີການ

ຊື່ ການອະທິບາຍ
add() ເພີ່ມຕົວເປັນຄຳນວຍຫຼັກຫຼືຫຼາຍຕົວເປັນຄຳນວຍຫຼັກສຳລັບລາຍການ。
contains() ຖ້າລາຍການກຳນົດມີຊະນິດແບບປະເພດຄູ່ມມາຈະກັບຄືນ true。
entries() ຈາກລາຍການກຳນົດມາສະແດງຄຳນວຍຫຼັກ/ຄວາມຜົນກະທົບ。
forEach() for (let token of list) {
function(token) { for (let token of list) {
for (let token of list) { item()
keys() length
remove() ການລຶບບາງຄະດີຈາກລາຍການ
replace() ການປ່ຽນບາງຄະດີໃນລາຍການ
supports() ການກວດສອບບາງຄະດີມີສິດທິສະຫຼາດບາງຄະດີຫຼືບໍ່
toggle() ປ່ຽນບາງຄະດີລະຫວ່າງລາຍການ
value ການຫຼົງອອກທະດັບຂອງບາງຄະດີ
values() ການຫຼົງອອກອາກາດທີ່ມີຈຸດນັດໃນລາຍການ

ຫຼາຍຕົວຢ່າງອື່ນໆ

ຕົວຢ່າງ 4

ການເພີ່ມບາງປະເພດຈາກປະກອບ

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

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 5

ການລຶບບາງປະເພດຈາກປະກອບ

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

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 6

ປະກອບມີບາງປະເພດຫຼືບໍ່?

let numb = element.classList.length;

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 7

ການຮຽບຮ້ອງບາງປະເພດຂອງປະກອບ "myDIV"

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

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 8

ການຮຽບຮ້ອງປະເພດທີ່ສຸດທີ່ມີປະກອບ

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

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 9

ປະກອບມີ "myStyle" ບາງປະເພດຫຼືບໍ່?

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

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 10

ຖ້າປະກອບມີ "myStyle" ບາງປະເພດທີ່ "anotherClass" ກ່າວ

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

ທົດລອງເອງຂອງທ່ານ

ຕົວຢ່າງ 11

ປ່ຽນປະເພດບອກນອກບາງເພື່ອສ້າງບອກນອກດາວນາວາຍ

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

ທົດລອງເອງຂອງທ່ານ

ກໍານົດ 12

ການສ້າງການນຳເປັນທີ່ຢູ່ປະຈຳພາກສະໜາມ

// ການກວດມາການນຳເປັນ
const navbar = document.getElementById("navbar");
// ການກວດມາຕຳແຫນງການຄົບຄວາມຂອງການນຳເປັນ
const sticky = navbar.offsetTop;
// ເມື່ອທ່ານໄດ້ເດີນທາງຄົບຄວາມທີ່ມີ sticky ທີ່ກວດມາ, ກວດມາ sticky ທີ່ການແຕ່ງເພີ່ມຊະນະ sticky ໃຫ້ແກ່ການນຳເປັນ
// ລຶບອອກຈາກຕຳແຫນງການຄົບຄວາມຂັ້ນຕົວ
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

ທົດລອງເອງຂອງທ່ານ

ການສະໜັບສະໜຸນທາງບັນຊີ

ທຸກພາສາຜູ້ມັກງານທົດລອງການສະໜັບສະໜຸນ element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ການສະໜັບສະໜຸນ 9-11 ການສະໜັບສະໜຸນ ການສະໜັບສະໜຸນ ການສະໜັບສະໜຸນ ການສະໜັບສະໜຸນ

ຫົວພວກສັນນະບູລັງ

ການສຶກສາ CSS:ສັນຍາ CSS

ການອະທິບາຍ CSS:ຄູ່ຄັດ CSS .class

ບັນດາວັດຖຸ DOMTokenList

ປະກອບປະກອບ className

ກົນລະບົບ getElementsByClassName()

HTML DOM Style 对象