เรียนรู้วิธีซ่อนและแสดงองค์ประกอบ DOM ด้วย JavaScript วานิลลาธรรมดา
JavaScript มีคุณสมบัติสไตล์ที่เรียกว่า style ที่สามารถใช้ตั้งค่าคุณสมบัติ CSS ในองค์ประกอบ และจัดรูปแบบได้เหมือนกับที่คุณสามารถทำได้ด้วย CSS มาลองดูกัน!
นี่คือวิธีที่คุณซ่อนองค์ประกอบ DOM ด้วย JavaScript:
element.style.display = "none"วิธีแสดงองค์ประกอบ DOM อีกครั้ง:
element.style.display = "block"
หมายเหตุ:หากแต่เดิมองค์ประกอบ DOM ของคุณถูกตั้งค่าเป็น inline หรือ inline-block เพียงแทนที่ block ค่าข้างต้นด้วยค่าใดค่าหนึ่งเหล่านั้น
ตัวอย่างที่ใช้งานได้จริง
ในตัวอย่างข้างต้น element เป็นเพียงตัวยึดตำแหน่งทั่วไป ในการใช้ style . ของ JavaScript ในทางปฏิบัติ คุณต้องเลือกองค์ประกอบ DOM ที่คุณต้องการจัดรูปแบบก่อน
สมมติว่าคุณมีปุ่มที่ต้องการนำออกจาก DOM ชื่อ cta-button . คุณจะทำอย่างนั้น:
const ctaButton = document.querySelector(".cta-button")
ctaButton.style.display = "none"