JavaScript เพิ่มคลาส:A Guide

การเพิ่มคุณสมบัติคลาสให้กับองค์ประกอบช่วยให้นักพัฒนาสร้างประสบการณ์ผู้ใช้แบบไดนามิกบนหน้าเว็บ เมื่อมีการเพิ่มคุณสมบัติของคลาสไปยังองค์ประกอบ องค์ประกอบที่เลือกนั้นจะถือว่าสไตล์ที่เกี่ยวข้องกับชื่อคลาสนั้น

ลองนึกถึงผู้ใช้ที่คลิกปุ่ม เมื่อคลิกปุ่ม เราต้องการให้ส่วนของหน้าเว็บเปลี่ยนตามสไตล์ชีต CSS ของเรา เราสามารถกำหนดชื่อคลาสที่เกี่ยวข้องกับสไตล์นั้นให้กับองค์ประกอบเพื่อเปลี่ยนลักษณะที่ปรากฏหลังจากคลิกปุ่ม

การสร้างประสบการณ์เชิงโต้ตอบมีความสำคัญในการเขียนโปรแกรมส่วนหน้า ในคู่มือนี้ เราจะสำรวจสองวิธีในการเพิ่มชื่อคลาสให้กับองค์ประกอบที่เลือกใน JavaScript ธรรมดา ในตอนท้าย คุณจะสามารถใช้เครื่องมือนี้ในโครงการของคุณเองได้

วิธีใช้ JavaScript เพิ่มคลาส

ใน JavaScript การเพิ่มชื่อคลาสสามารถทำได้สองวิธี ขั้นแรก เราเลือกองค์ประกอบ HTML ที่ต้องการ จากนั้น เรามีทางเลือกว่าจะใช้คุณสมบัติ className หรือ add() วิธีการเพิ่มชื่อคลาสให้กับองค์ประกอบ เราจะผ่านไวยากรณ์และใช้ในส่วนถัดไป

จำไว้ว่าเราใช้ JavaScript ธรรมดาที่นี่ ไม่จำเป็นต้องใช้ห้องสมุด เนื่องจากเราใช้ JavaScript ปกติ แนวทางปฏิบัติทั่วไปคือการรวมตรรกะข้างต้นไว้ในฟังก์ชันและส่งผ่านฟังก์ชันนั้นไปยังตัวจัดการเหตุการณ์ เพื่อให้แน่ใจว่าฟังก์ชันเพื่อเพิ่มชื่อคลาสจะเกิดขึ้นหลังจากเหตุการณ์เฉพาะเกิดขึ้นเท่านั้น

สำหรับองค์ประกอบ HTML พวกมันสามารถมีชื่อคลาสได้หลายชื่อ สิ่งนี้มีประโยชน์ในการจำเพราะเราสามารถเพิ่มชื่อคลาสให้กับองค์ประกอบที่มีชื่อหรือรหัสคลาสอื่นอยู่แล้ว ทั้งหมดที่เราต้องจำไว้คือสไตล์ที่สัมพันธ์กับชื่อคลาสในโครงการของเรา และเพิ่มชื่อให้กับองค์ประกอบที่เราต้องการจัดสไตล์

JavaScript Syntax เพื่อเพิ่มชื่อคลาส

เราจะมาดูสองวิธีในการเพิ่มชื่อคลาสให้กับองค์ประกอบ จำจากส่วนด้านบนที่ตัดตรรกะเพื่อเพิ่มคลาสภายในฟังก์ชันเป็นแนวปฏิบัติทั่วไป เมื่อเราสร้างฟังก์ชันของเราแล้ว เราสามารถเรียกมันว่าภายในแอตทริบิวต์ onClick HTML

วิธีแรกในการเพิ่มชื่อคลาสโดยใช้ JavaScript ธรรมดาคือผ่านคุณสมบัติ className ตรรกะในที่นี้คือการเลือกองค์ประกอบ จากนั้นเรียก .className ในองค์ประกอบที่เลือก จากนั้นเราสามารถเชื่อมชื่อคลาสกับองค์ประกอบได้

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

เริ่มต้นด้วย HTML ของเรา:

<div id="div">
Hello World
</div>
<button>
Add Class
</button>

ที่นี่เรามี

ที่มี id ของ "div" ใต้

ของเรามีปุ่ม ปุ่มนี้จะเพิ่มชื่อชั้นเรียนเมื่อคลิก ทีนี้มาดูตัวอย่างคลาส CSS

.background {
  background-color: blue;
  color: white;
}

ในไฟล์ CSS ของเรา เรามี "พื้นหลัง" ของคลาส ที่นี่จะมีสไตล์ด้วยสีพื้นหลังสีน้ำเงินและข้อความจะเป็นสีขาว เราต้องการเพิ่มชื่อคลาส "background" ให้กับ

ด้วย id "div"

JavaScript สามารถจัดการการเลือก

ในฟังก์ชันได้ดังนี้:

const addClass = () => {
  const element = document.getElementById('div');
  element.className += "background"
}

ฟังก์ชันของเราที่ชื่อว่า addClass จะเลือก

โดยใช้ id ของ "div" เราสามารถเก็บไว้ในตัวแปรที่เรียกว่าองค์ประกอบ จากที่นี่ เราเรียกคุณสมบัติ className บนตัวแปรของเรา และเชื่อมชื่อคลาส "background" ในการตรวจสอบ การต่อกันใน JavaScript จะเพิ่มองค์ประกอบในรายการ กล่าวอีกนัยหนึ่ง การต่อชื่อคลาสจะเพิ่มชื่อคลาสนั้นให้กับองค์ประกอบ และคลาสที่กำหนดไว้ก่อนหน้านี้ในองค์ประกอบนั้นจะยังคงปรากฏอยู่

เรายังทำไม่เสร็จ! เรายังคงต้องเรียกใช้ฟังก์ชัน addClass ของเราที่ไหนสักแห่ง มาเพิ่มชื่อคลาสใน

ของเราหลังจากที่คลิกปุ่มแล้ว

<div id="div">
Hello World
</div>
<button onClick="addClass()">
Add Class
</button>

โดยการใช้เมธอด JavaScript onClick เราสามารถเรียกใช้ฟังก์ชันของเราหลังจากที่คลิกปุ่มแล้ว มาทดสอบกันโดยคลิกที่ปุ่ม

ในการตรวจสอบสิ่งที่เกิดขึ้น เราได้เพิ่มชื่อคลาส “พื้นหลัง” ที่เกี่ยวข้องกับการจัดสไตล์ในไฟล์ CSS ของเรา หลังจากที่เราสร้างฟังก์ชัน JavaScript เพื่อค้นหาองค์ประกอบและเพิ่มชื่อคลาส สไตล์คลาสจะถูกนำไปใช้กับ

เมื่อคลิกปุ่ม

วิธีการเพิ่ม JavaScript ของ JavaScript

จากตัวอย่างเดียวกันกับข้างต้น มาดูวิธีเพิ่มชื่อคลาสอีกทางหนึ่งกัน สิ่งนี้เกี่ยวข้องกับการใช้ JavaScript add() กระบวนการ. ต่างจากตัวอย่างข้างต้น เราใช้คุณสมบัติ classList เพื่อเรียก add() .

addClass()ของเรา ฟังก์ชั่นตอนนี้มีลักษณะดังนี้:

const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background")
}

เรายังคงได้รับ

ด้วย id และเก็บไว้ในตัวแปร จากนั้นเราเรียกคุณสมบัติ classList บนตัวแปรของเราตามด้วย add() กระบวนการ. เราส่งชื่อคลาส "background" ไปที่ add() เป็นอาร์กิวเมนต์

เพิ่ม "พื้นหลัง" ของคลาสแล้ว

เราได้รับผลลัพธ์เดียวกันโดยการเข้ารหัสในสองวิธีที่แตกต่างกัน ตัวเลือกใดที่จะใช้ในโค้ดของคุณเป็นของคุณ แต่วิธีที่สองได้รับการยอมรับอย่างกว้างขวางว่าเป็นแนวทางปฏิบัติที่ดีที่สุด การใช้ add() ถือเป็นแนวทางปฏิบัติที่ดีที่สุด เนื่องจากมีโอกาสเกิดข้อผิดพลาดน้อยกว่าการใช้การต่อข้อมูล

บทสรุป

ในคู่มือนี้ เราได้เรียนรู้วิธีเพิ่มชื่อคลาสให้กับองค์ประกอบ สิ่งนี้มีประโยชน์เมื่อคุณมีคลาสที่ถูกกำหนดสไตล์ในไฟล์ CSS โดยการเพิ่มชื่อคลาสให้กับองค์ประกอบ HTML เฉพาะ องค์ประกอบนั้นจะสืบทอดสไตล์ที่พบในไฟล์ CSS

ด้วยการเปลี่ยนรูปลักษณ์ขององค์ประกอบบนหน้าเว็บแบบไดนามิก เราจึงสามารถมอบประสบการณ์การโต้ตอบกับแอปแก่ผู้ใช้ได้ เมื่อเราเขียนแอปพลิเคชันแบบโต้ตอบ จะรู้สึกเป็นธรรมชาติและมีส่วนร่วมกับผู้ใช้ มันจะทำให้พวกเขากลับมาสำรวจแอพของเราต่อไป