HTML DOM Element className

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

className ການຕັ້ງມີຫຼືການບັນທຶກຄວາມ class ຂອງບັນດາປະກອບສ່ວນ.

ບໍ່ບໍ່ບຸກຄົນ:

ພາສາ Element classList

ພາສາ Document getElementsByClassName()

HTML DOM Style Object

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ການຕັ້ງມີຄວາມ class ຂອງບັນດາປະກອບສ່ວນ:

element.className = "myStyle";

ທ້າທາຍດີຕະຫຼອດ

ຕົວຢ່າງ 2

ການຄົ້ນຄວາມ class ຂອງ "myDIV":

let value = document.getElementById("myDIV").className;

ທ້າທາຍດີຕະຫຼອດ

ຕົວຢ່າງ 3

ປ່ຽນມິວສະບັບລະຫວ່າງສອງຄວາມລາຍລະອຽດ:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

ທ້າທາຍດີຕະຫຼອດ

ຄຳເຕືອນ:ມີຫຼາຍຄວາມຄົນສົມມຸດຕິກຳຢູ່ດ້ານກ້ອງຂອງເວັບໄຊ.

ສັນຍາ

ການບັນທຶກ className:

HTMLElementObject.className

ການຕັ້ງມີຄວາມ className:

HTMLElementObject.className = class

ຄວາມລາຍລະອຽດ

ຄວາມ ການອະທິບາຍ
class

ຊື່ບັນດາຄູ່ຄັນຂອງບັນດາບັນນາທິການ

ຈຳນວນບັນດາຄູ່ຄັນຈະຖືກຈຳນວນອອກຈາກບາງຈຳນວນ ວ່າ "test demo"。

ຄຳຕອບກັບ

ປະເພດ ການອະທິບາຍ
ຕາມກຳນົດ ບັນດາຄູ່ຄັນຂອງບັນດາບັນນາທິການ ຫຼື ລະບົບຄູ່ຄັນທີ່ຖືກຈຳນວນອອກຈາກບາງຈຳນວນ:

ຫຼາຍຕົວຢ່າງອີກ

ຕົວຢ່າງ 4

ການຄົ້ນຫາ class ທີ່ມີຢູ່ໃນ <div> ທີ່ທໍາອິດ (ຖ້າມີ):

let value = document.getElementsByTagName("div")[0].className;

ທ້າທາຍດີຕະຫຼອດ

ຕົວຢ່າງ 5

ການຄົ້ນຫາ class ທີ່ມີຄູ່ຄັນຫຼາຍ:

<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

ທ້າທາຍດີຕະຫຼອດ

ຕົວຢ່າງ 6

ທີ່ຈະປ່ຽນຄູ່ຄັນ class ທີ່ມີຢູ່ໂດຍ class ຄືນໃໝ່:

element.className = "newClassName";

ທ້າທາຍດີຕະຫຼອດ

ຕົວຢ່າງ 7

ສຳລັບການເພີ່ມຄູ່ຄັນໃໝ່ບໍ່ທຳລາຍຄູ່ຄັນທີ່ມີຢູ່ແລ້ວກະຈາຍຈຳນວນອອກຈາກບາງຈຳນວນ:

element.className += " class1 class2";

ທ້າທາຍດີຕະຫຼອດ

ຕົວຢ່າງ 8

ຖ້າ "myDIV" ມີ "myStyle" ຄູ່ຄັນຈະປ່ຽນຂະໜາດມີຕົວຈຳນວນ:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

ທ້າທາຍດີຕະຫຼອດ

ຕົວຢ່າງ 9

ຖ້າທ່ານສົບພົບຈາກດ້ານສູງຂອງເວັບໄຊ 50 ປະຕູບອກຈະເພີ່ມ "test" ຄູ່ຄັນ:

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

ທ້າທາຍດີຕະຫຼອດ

ສະໜັບສະໜູນບັນດາບັນນາທິການ

ທຸກບັນດາບັນນາທິການອາດສະໜັບສະໜູນ element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ

ເວັບໄຊທີ່ກ່ຽວກັບ

CSS 教程：CSS 语法

CSS 参考手册：CSS .class 选择器