เปลี่ยนคลาสขององค์ประกอบด้วย JavaScript/jQuery

 

โพสต์นี้จะกล่าวถึงวิธีการเปลี่ยนคลาสขององค์ประกอบโดยใช้ JavaScript และ jQuery

1. แทนที่คลาสด้วยคลาสอื่น

หากต้องการแทนที่คลาสด้วยคลาสอื่น คุณสามารถลบคลาสเก่าโดยใช้เมธอด .removeClass() ของ jQuery แล้วเพิ่มคลาสใหม่โดยใช้เมธอด .addClass() ของ jQuery

function replaceClass(id, oldClass, newClass) {
    var elem = $(`#${id}`);
    if (elem.hasClass(oldClass)) {
        elem.removeClass(oldClass);
    }
    elem.addClass(newClass);
}
 
$(document).ready(function() {
    $("#darkmode").click(function() {
        replaceClass("container", "light", "dark");
    });
 
    $("#lightmode").click(function() {
        replaceClass("container", "dark", "light");
    });
});

 #### CSS ####

.light {
    background-color: #ffffff;
}
 

.dark {
    background-color: #243447;
}

 #### HTML ####

<div class="light" id="container"></div>
<button id="darkmode">Dark Mode</button>
<button id="lightmode">Light Mode</button>

ใน JavaScript ธรรมดา คุณสามารถใช้เมธอด Element.classList.remove() และ Element.classList.add() เพื่อลบและเพิ่มคลาสตามลำดับ

function replaceClass(id, oldClass, newClass) {
    var elem = document.getElementById(id);
    elem.classList.remove(oldClass);
    elem.classList.add(newClass);
}
 
document.getElementById("darkmode").onclick = function() {
    replaceClass("container", "light", "dark");
}
 
document.getElementById("lightmode").onclick = function() {
    replaceClass("container", "dark", "light");
}

2. แทนที่คลาสทั้งหมดด้วยคลาสใหม่อย่างน้อยหนึ่งคลาส

หากต้องการแทนที่คลาสที่มีอยู่ทั้งหมดด้วยคลาสใหม่หนึ่งคลาสขึ้นไป คุณเพียงแค่แทนที่เนื้อหาของแอตทริบิวต์ของคลาสด้วยคลาสใหม่ นี่คือตัวอย่างใน jQuery ที่สาธิตโดยใช้เมธอด .attr()

$(document).ready(function() {
    $("#darkmode").click(function() {
        $("#container").attr("class", "dark");
    });
 
    $("#lightmode").click(function() {
        $("#container").attr("class", "light");
    });
});

ใน JavaScript ธรรมดา เราสามารถทำได้ด้วยแอตทริบิวต์ className

document.getElementById("darkmode").onclick = function() {
    document.getElementById("container").className = "dark";
}
 
document.getElementById("lightmode").onclick = function() {
    document.getElementById("container").className = "light";
}

3. สลับคลาส

คุณสามารถใช้คุณลักษณะการสลับใน JavaScript ซึ่งจะสลับระหว่างสองคลาส นี่คือตัวอย่างการทำงาน:

document.getElementById("mode").onclick = function() {
    if (this.innerText === "Dark Mode") {
        this.innerText = "Light Mode";
    }
    else {
        this.innerText = "Dark Mode";
    }
 
    document.getElementById("container").classList.toggle("dark");
}

นั่นคือทั้งหมดที่เกี่ยวกับการเปลี่ยนคลาสขององค์ประกอบโดยใช้ JavaScript และ jQuery