คุณสมบัติ className ของ HTML DOM Element

การเขียนและการใช้งาน

className ตั้งค่าหรือกลับค่าคุณสมบัติ class ขององค์ประกอบ

ดูเพิ่มเติมที่:

คุณสมบัติ classList ของ Element

วิธีการ Document getElementsByClassName()

อนุประเทศ HTML DOM Style

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าคลาสขององค์ประกอบ:

element.className = "myStyle";

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ดึงค่าคลาสของ "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：เลือก .class ใน CSS