วิธีการ - สลับคลาส
สลับระหว่างการเพิ่มและลบชื่อคลาสจากองค์ประกอบด้วย JavaScript
คลิกปุ่มเพื่อสลับชื่อคลาส!
สลับคลาส
ขั้นตอนที่ 1) เพิ่ม HTML:
สลับระหว่างการเพิ่มชื่อคลาสให้กับองค์ประกอบ div ด้วย id="myDIV" (ในตัวอย่างนี้ เราใช้ปุ่มเพื่อสลับชื่อคลาส)
ตัวอย่าง
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
ขั้นตอนที่ 2) เพิ่ม CSS:
เพิ่มชื่อคลาสเพื่อสลับ:
ตัวอย่าง
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
ขั้นตอนที่ 3) เพิ่ม JavaScript:
รับ <div> องค์ประกอบด้วย id="myDIV" และสลับระหว่างคลาส "mystyle":
ตัวอย่าง
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
เคล็ดลับ:ดูวิธีเพิ่มชั้นเรียนด้วย
เคล็ดลับ:ดูวิธีลบคลาสด้วย
เคล็ดลับ:เรียนรู้เพิ่มเติมเกี่ยวกับ คุณสมบัติ classListในการอ้างอิง JavaScript ของเรา