คู่มือนี้จะอธิบายขั้นตอนการเพิ่มคลาสที่ใช้งานใน JavaScript
จะเพิ่ม Active Class ใน JavaScript ได้อย่างไร?
ในการเพิ่มคลาสที่ใช้งาน เราจะใช้วิธีต่อไปนี้:
ไปที่วิธีแรกกันเลย!
วิธีที่ 1: ใช้ document.getElementById() ด้วย classList.add() วิธีการเพิ่ม Active Class ใน JavaScript
ในจาวาสคริปต์ “ document.getElementById() ” ใช้เพื่อเข้าถึงองค์ประกอบบางอย่างด้วยรหัสของมัน อย่างไรก็ตาม จะเลือกองค์ประกอบตามรหัสเท่านั้น ไม่ใช่คลาส คุณสามารถใช้กับ“ classList.add() ” วิธีการเพิ่มคลาสที่ใช้งานใน JavaScript
ลองสำรวจวิธีนี้โดยยกตัวอย่าง
ตัวอย่าง
ในไฟล์ HTML ของเรา เราจะใช้ “ ” พร้อมข้อความระบุ id เป็น “ txt ” และเพิ่ม “ เมื่อคลิก ” เหตุการณ์ที่จะเรียก “ เปิดใช้งาน() ' การทำงาน. โปรดทราบว่า เพิ่มแท็ก
ภายในแท็ก
: < พี่ไอดี = 'txt' เมื่อคลิก = 'เปิดใช้งาน()' > แตะที่นี่ พี >ในไฟล์ JavaScript ให้กำหนดฟังก์ชัน activate() เพื่อให้เข้าถึงองค์ประกอบย่อหน้าก่อนโดยใช้รหัสในเมธอด document.getElementbyId() จากนั้น เพิ่มคลาส CSS ในรายการคลาสเพื่อจุดประสงค์ในการจัดสไตล์:
เปิดใช้งานฟังก์ชัน ( ) {
มี = เอกสาร. getElementById ( 'txt' ) ;
ก. classList . เพิ่ม ( 'คลาสใหม่' ) ;
}
ในไฟล์ CSS ให้วางจุดไว้หน้า “ คลาสใหม่ ” และมอบหมาย “ สีพื้นหลัง ” คุณสมบัติค่า “ ส้ม ”:
. คลาสใหม่ {พื้นหลัง - สี : ส้ม ;
}
ดังนั้น เมื่อคุณจะคลิกที่องค์ประกอบย่อหน้า คุณสมบัติพื้นหลังที่เพิ่มเข้ามาจะถูกนำไปใช้กับองค์ประกอบนั้น:
มาดูวิธีการต่อไปนี้ที่เราจะใช้ document.querySelector() เพื่อเพิ่มคลาสที่ใช้งาน
วิธีที่ 2: ใช้ document.querySelector() ด้วย classList.add() วิธีการเพิ่ม Active Class ใน JavaScript
ในจาวาสคริปต์ “ document.querySelector() ” ถูกใช้เพื่อรับองค์ประกอบแรกจากรหัส คุณสามารถระบุคลาสและรหัสทั้งภายในเมธอด querySelector() สามารถใช้กับ “ classList.add() ” วิธีการเพิ่มคลาสที่ใช้งานใน JavaScript
ตัวอย่าง
ตอนนี้เราจะใช้เฉพาะ “ document.querySelector() ” พร้อมไอดี “ #txt ” เพื่อเลือกองค์ประกอบย่อหน้า อีกครั้งจะใช้วิธี classList.add() เพื่อเพิ่ม active “ คลาสใหม่ ”:
เปิดใช้งานฟังก์ชัน ( ) {มี = เอกสาร. แบบสอบถามตัวเลือก ( '#txt' ) ;
ก. classList . เพิ่ม ( 'คลาสใหม่' ) ;
}
เอาท์พุต
เราได้เรียนรู้สองวิธีที่ง่ายที่สุดในการเพิ่มคลาสที่ใช้งานใน JavaScript
บทสรุป
เพื่อเพิ่มคลาสที่ใช้งาน เราสามารถใช้ “ getElementById() ' หรือ ' แบบสอบถามตัวเลือก () ” ด้วยเมธอด classList.add() ทั้งสองวิธีที่กล่าวถึงจะได้รับองค์ประกอบตาม id ของพวกเขาก่อน จากนั้นจึงใช้วิธี classList.add() ซึ่งเป็นชื่อคลาสใหม่ที่กำหนดให้กับองค์ประกอบที่สามารถใช้เพื่อจุดประสงค์ในการจัดรูปแบบ โพสต์นี้ได้อธิบายขั้นตอนที่เกี่ยวข้องกับการเพิ่มคลาสที่ใช้งานใน JavaScript