การศึกษานี้จะแสดงวิธีการเปลี่ยนสีของข้อความใน JavaScript
จะเปลี่ยนสีข้อความใน JavaScript ได้อย่างไร?
สำหรับการเปลี่ยนสีข้อความใน JavaScript ให้ใช้วิธี JavaScript ที่กำหนดไว้ล่วงหน้าที่กล่าวถึงด้านล่าง:
- คุณสมบัติ style.color ด้วย getElementById() method
- คุณสมบัติ style.color พร้อม querySelector() method
มาอธิบายวิธีการเหล่านี้เป็นรายบุคคล
วิธีที่ 1: เปลี่ยนสีข้อความโดยใช้คุณสมบัติ style.color ด้วย getElementById() Method
หากต้องการเปลี่ยนสีของข้อความ คุณสามารถใช้ปุ่ม “ getElementById() ” ด้วยวิธีการ “ style.color ' คุณสมบัติ. ในสถานการณ์เช่นนี้ องค์ประกอบข้อความสามารถเข้าถึงได้โดยใช้เมธอด getElementById() จากนั้นใช้แอตทริบิวต์สีด้วยความช่วยเหลือของคุณสมบัติ HTML style.color
ไวยากรณ์
ใช้ไวยากรณ์ที่กำหนดสำหรับการเปลี่ยนสีข้อความโดยใช้คุณสมบัติสีโดยใช้เมธอด getElementById()
เอกสาร. getElementById ( 'ไอดี' ) . สไตล์ . สี = 'สี' ;“ id ” คือรหัสขององค์ประกอบที่ระบุเพื่อเข้าถึงองค์ประกอบข้อความแล้วเปลี่ยนสีโดยใช้คุณสมบัติ style.color
มุ่งหน้าไปยังตัวอย่างด้านล่างเพื่อทำความเข้าใจแนวคิดที่ระบุไว้!
ตัวอย่าง
ขั้นแรกเราจะสร้างหัวข้อโดยใช้ แท็กและกำหนด ID “ id ” ที่ใช้เพื่อเข้าถึงองค์ประกอบ h4 จากนั้นสร้างปุ่มที่เรียกใช้ฟังก์ชันชื่อ “ เปลี่ยนสี() ” กำหนดไว้ในไฟล์ JavaScript(JS) เมื่อเหตุการณ์ onclick ของปุ่มที่เพิ่มถูกทริกเกอร์:
< รหัส h4 = 'ไอดี' > ยินดีต้อนรับสู่ LinuxHint h4 >< ประเภทปุ่ม = 'ปุ่ม' เมื่อคลิก = 'เปลี่ยนสี()' > คลิกเพื่อดูความมหัศจรรย์ ปุ่ม >
ในไฟล์ JS กำหนดฟังก์ชันชื่อ “ เปลี่ยนสี() ” และรับส่วนหัวโดยส่ง id ไปยังเมธอด getElementById() แล้วเปลี่ยนสี:
ฟังก์ชันเปลี่ยนสี ( ) {เอกสาร. getElementById ( 'ไอดี' ) . สไตล์ . สี = 'สีแดง' ;
}
สุดท้าย ระบุแหล่งที่มาของไฟล์ JavaScript โดยใช้แท็ก src ในไฟล์ HTML:
< สคริปต์ src = './JSfile.js' > สคริปต์ >จะเห็นได้จากผลลัพธ์ว่าเมื่อคลิกปุ่มที่เพิ่มเข้าไป องค์ประกอบข้อความจะเปลี่ยนสีเป็น “ สีแดง ”:
มาดูวิธีอื่นกัน!
วิธีที่ 2: เปลี่ยนสีข้อความโดยใช้คุณสมบัติ style.color ด้วย querySelector() Method
คุณยังสามารถเปลี่ยนสีของข้อความโดยใช้ปุ่ม “ แบบสอบถามตัวเลือก () ” ด้วยคุณสมบัติ style.color มันเข้าถึงองค์ประกอบที่มีทั้ง id หรือคลาสที่กำหนดในขณะที่เมธอด getElementById() เพิ่งดึงองค์ประกอบด้วย id ที่กำหนด
ไวยากรณ์
ใช้ไวยากรณ์ต่อไปนี้เพื่อเปลี่ยนสีข้อความโดยใช้คุณสมบัติสีโดยใช้วิธี querySelector()
เอกสาร. แบบสอบถามตัวเลือก ( 'รหัส/ชื่อคลาส' ) . สไตล์ . สี = 'สี' ;ตัวอย่าง
ในที่นี้ เราจะใช้ แท็กเพื่อเพิ่มย่อหน้าที่มีคลาสชื่อ “ สี ” ที่จะช่วยในการเข้าถึง
องค์ประกอบและปุ่มที่จะเรียก JavaScript “ เปลี่ยนสี() ” เมธอดเมื่อเหตุการณ์ onclick ถูกทริกเกอร์:
< พี ระดับ = 'สี' > ยินดีต้อนรับสู่ LinuxHint พี >< ปุ่ม onclick = 'เปลี่ยนสี()' > คลิกเพื่อดูความมหัศจรรย์ ปุ่ม >
ในนิยามของ “ เปลี่ยนสี() ” วิธีเราจะเรียกใช้ “ แบบสอบถามตัวเลือก () ” โดยส่งชื่อคลาสด้วย dot(.) ที่ระบุว่ามีการเข้าถึงองค์ประกอบตามชื่อคลาส จากนั้นใช้คุณสมบัติสีกับมัน:
ฟังก์ชันเปลี่ยนสี ( ) {เอกสาร. แบบสอบถามตัวเลือก ( '.สี' ) . สไตล์ . สี = 'ม่วงแดง' ;
}
อย่างไรก็ตาม หากต้องการใช้รหัสในองค์ประกอบ HTML และเข้าถึงโดยใช้วิธี querySelector() ให้เพิ่ม ' # ” ลงชื่อด้วย ID:
เอกสาร. แบบสอบถามตัวเลือก ( '#สี' ) . สไตล์ . สี = 'ม่วงแดง' ;เอาท์พุต
เราได้รวบรวมแนวทางที่ง่ายที่สุดในการเปลี่ยนสีข้อความใน JavaScript
บทสรุป
สำหรับการเปลี่ยนสีข้อความ คุณสามารถใช้คุณสมบัติ style.color โดยใช้เมธอด getElementById() หรือเมธอด querySelector() เมธอด getElementById() ใช้เพื่อเข้าถึงองค์ประกอบ HTML ตาม id ที่กำหนด ในขณะที่เมธอด querySelector() เข้าถึงองค์ประกอบตาม id ที่กำหนดหรือคลาสโดยการระบุเครื่องหมาย (#) หรือ (.) ตามลำดับ การศึกษานี้แสดงขั้นตอนง่ายๆ ในการเปลี่ยนสีข้อความใน JavaScript