HTML DOM Element className
❮ วัตถุธาตุตัวอย่าง
ตั้งค่าแอตทริบิวต์ class สำหรับองค์ประกอบ:
element.className = "myStyle";
รับแอตทริบิวต์คลาสของ "myDIV":
let value = document.getElementById("myDIV").className;
สลับระหว่างสองชื่อคลาส:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ชุดclassName
คุณสมบัติหรือส่งคืนแอตทริบิวต์คลาสขององค์ประกอบ
ไวยากรณ์
ส่งคืนคุณสมบัติ className:
HTMLElementObject.className
ตั้งค่าคุณสมบัติ className:
HTMLElementObject.className = class
มูลค่าทรัพย์สิน
Value | Description |
class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
คืนมูลค่า
Type | Description |
String | The class, or a space-separated list of classes, of an element |
ตัวอย่างเพิ่มเติม
รับแอตทริบิวต์ class ขององค์ประกอบ <div> แรก (ถ้ามี):
let value = document.getElementsByTagName("div")[0].className;
รับแอตทริบิวต์คลาสที่มีหลายคลาส:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
เขียนทับแอตทริบิวต์คลาสที่มีอยู่ด้วยแอตทริบิวต์ใหม่:
element.className = "newClassName";
ในการเพิ่มคลาสใหม่โดยไม่ต้องเขียนทับค่าที่มีอยู่ ให้เพิ่มช่องว่างและคลาสใหม่:
element.className += " class1 class2";
ถ้า "myDIV" มีคลาส "myStyle" ให้เปลี่ยนขนาดฟอนต์:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
หากคุณเลื่อน 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 |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ วัตถุธาตุ