การลบคลาสออกจากองค์ประกอบ HTML นั้นทำได้ง่ายด้วย remove() ของคุณสมบัติ JavaScript classList กระบวนการ. หากคุณได้อ่านวิธีเพิ่มชั้นเรียนให้กับองค์ประกอบแล้ว คุณจะรู้ว่าการลบชั้นเรียนนั้นเหมือนกันทุกประการ ในทางกลับกัน
มาดูสูตรทั่วไปของ classList.remove() แล้วตามด้วยตัวอย่างที่นำไปใช้ได้จริง
สูตร
var element = document.querySelector("selector")
element.classList.remove("class")ในตัวอย่างทั่วไปข้างต้น เราพบ องค์ประกอบ HTML แรก บนหน้าที่มี ชื่อตัวเลือก . ที่ระบุ (อาจเป็นตัวเลือกองค์ประกอบ ตัวเลือกคลาส ฯลฯ) และเก็บข้อมูลอ้างอิงไว้ด้วยตัวแปร
จากนั้นเราแนบ คุณสมบัติ classList remove() วิธีการไปยังวัตถุองค์ประกอบ (ตัวแปร) และระบุคลาสที่เราต้องการลบออกจากมัน
ตัวอย่างการใช้งาน classList.remove()
ในการค้นหาและลบคลาส เราจำเป็นต้องค้นหาองค์ประกอบที่มีคลาสอย่างชัดเจน
แล้วเราควรถอดคลาสไหนดี?
เพื่อให้ชีวิตของเราง่ายขึ้น ฉันเพิ่งเพิ่มคลาส italic ไปยังย่อหน้าที่คุณกำลังอ่าน อย่างที่คุณเห็น มันทำให้ข้อความเป็นตัวเอียง
มา "ทำให้ไม่เอียง" ย่อหน้าด้านบนด้วยเทคนิค classList.remove ที่เพิ่งค้นพบของเรา:
var firstParagraph = document.querySelector(".italic")
firstParagraph.classList.remove("italic")และผลลัพธ์:
หมายเหตุ:ฉันมี italic ในสไตล์ชีต CSS ของเว็บไซต์ฉันจึงใช้งานได้ ชั้นเรียนมีลักษณะดังนี้:
.italic {
font-style: italic;
}แหล่งข้อมูล
- MDN Web Docs element.classList
