วิธีการ - สลับโหมดมืด
สลับระหว่างโหมดมืดและสว่างด้วย CSS และ JavaScript
สลับคลาส
ขั้นตอนที่ 1) เพิ่ม HTML:
ใช้องค์ประกอบใดๆ ที่ควรจัดเก็บเนื้อหาที่คุณต้องการสลับการออกแบบ ในตัวอย่างของเรา เราจะใช้<body>
เพื่อความเรียบง่าย:
ตัวอย่าง
<body>
ขั้นตอนที่ 2) เพิ่ม CSS:
จัดรูปแบบ<body>
องค์ประกอบและสร้าง.dark-mode
คลาสสำหรับการสลับ:
ตัวอย่าง
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
ขั้นตอนที่ 3) เพิ่ม JavaScript:
รับ<body>
องค์ประกอบและสลับระหว่าง.dark-mode
คลาส:
ตัวอย่าง
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
เคล็ดลับ:ดูวิธีเพิ่มชั้นเรียนด้วย
เคล็ดลับ:เรียนรู้เพิ่มเติมเกี่ยวกับ คุณสมบัติ classListในการอ้างอิง JavaScript ของเรา