ປະກອບສະບາຍ class HTML

ການສະແດງ ແລະ ການນໍາໃຊ້

class ປະກອບສະບາຍຫຼັກສະແກນຊື່ປະກອບສະແກນ (classname).

class ປະກອບສະບາຍຫຼັກຢູ່ໃນການປະກົດຢູ່ໃນແບບວິຊາສະແກນ (class) ແຕ່ຍັງສາມາດໃຊ້ມັນໃຫ້ປ່ຽນແປງປະກອບວິຊາສະແກນ (HTML element) ທີ່ມີ class ແນວຄືນຈາກ JavaScript (HTML DOM).

Please see also:

HTML tutorial:HTML ປະສົມປະກອບ

CSS tutorial:CSS ກົດລະບຽບ

CSS reference manual:CSS .class ຄູ່ຄ້າຍ

ຄູ່ມື HTML DOM:HTML DOM getElementsByClassName() method

ຄູ່ມື HTML DOM:HTML DOM className attribute

ຄູ່ມື HTML DOM:HTML DOM classList attribute

ຄູ່ມື HTML DOM:HTML DOM Style ໂອລິເກຣັກ

ຄວາມຄິດອີກ:

ຄວາມຄິດ 1

ການໃຊ້ class attribute ໃນ HTML document:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">ບໍ່ຄິດ, ນີ້ເປັນບົດສັນທີ່ສຳຄັນ.:)</p>
</body>
</html>

ທົດລອງທັນທີ

ມີຫລາຍຄວາມຄິດອີກໃນບໍລິເວນດ້ານລຸ່ມ.

ກົດລະບຽບ

<element class="classname">

ຄູ່ມືຂອງບັນດາລັກສະນະ

ຄູ່ມື ການອະທິບາຍ
classname

ກຳນົດ class ສຳລັບ element。

ຖ້າຕ້ອງກຳນົດຫລາຍປະເພດ class, ສາມາດໃຊ້ຈັດຕັ້ງດ້ວຍອາກາດ.

ນີ້ອານຸຍາດໃຫ້ການປະກອບຫລາຍປະເພດ CSS class ສໍາລັບ element HTML。

ຕົວຢ່າງ:<span class="left important">

ກົດລະບຽບຊື່:

  • ຕ້ອງເລີ່ມຈາກອີລາສະຕິ A-Z ຫລື a-z
  • ສາມາດຕິດຕາມດ້ວຍ: ອີລາສະຕິ (A-Za-z)、ໂຕກິນ (0-9)、ສີປອດ ("-"), ແລະ ສີຫົວ ("_")

ຫລາຍຄວາມຄິດອີກ:

ຄວາມຄິດ 2

ການໃຊ້ຫລາຍປະເພດໃນ HTML element:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">ຫົວຂໍ້ 1</h1>
<p>ບົດສັນ.</p>
</body>
</html>

ທົດລອງທັນທີ

ຄວາມຄິດທີ 3

ການໃຊ້ JavaScript ໃຫ້ມີລັກສີສີເຫຼືອງໃສ່ຫນັງທີ່ມີ class="example" (ບັນຊີ 0)。

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

ທົດລອງທັນທີ

ກໍານົດ 4

ນຳໃຊ້ JavaScript ເພື່ອເພີ່ມປະເພດ "mystyle" ໃຫ້ບັນດາປະກອບ id "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

ທົດລອງທັນທີ

ການສະໜັບສະໜູນບັນຊີບັນນາທິການ

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