บทความนี้จะอธิบายวิธีการเพิ่ม CSS ด้วย JavaScript
จะเพิ่ม CSS ด้วย JavaScript ได้อย่างไร
ใน JavaScript คุณสามารถเพิ่มสไตล์ CSS ให้กับองค์ประกอบโดยแก้ไขคุณสมบัติสไตล์โดยใช้วิธีการต่อไปนี้:
- คุณสมบัติ style เป็นสไตล์อินไลน์
- setAttribute() เมธอดเป็นแบบอินไลน์
- createElement() เมธอดเป็นสไตล์ส่วนกลาง
วิธีที่ 1: เพิ่ม CSS ด้วย JavaScript โดยใช้คุณสมบัติ 'style'
สำหรับการเพิ่ม CSS ใน JavaScript ให้ใช้ปุ่ม “ สไตล์ ' คุณสมบัติ. ใช้เพื่อเข้าถึงและจัดการสไตล์อินไลน์ขององค์ประกอบ ให้วัตถุที่แสดงถึงสไตล์อินไลน์ขององค์ประกอบและอนุญาตให้รับหรือตั้งค่าคุณสมบัติสไตล์แต่ละรายการ
ไวยากรณ์
สำหรับการเพิ่มสไตล์ CSS ใน JavaScript จะใช้ไวยากรณ์ต่อไปนี้สำหรับ ' สไตล์ ' คุณสมบัติ:
องค์ประกอบ. สไตล์ ;
ที่นี่, ' องค์ประกอบ ” เป็นการอ้างอิงถึงองค์ประกอบ HTML
ตัวอย่าง
ในตัวอย่างต่อไปนี้ เราจะจัดรูปแบบปุ่มโดยใช้ JavaScript ประการแรก เราจะสร้างปุ่มสามปุ่มและกำหนดรหัสให้กับปุ่มเหล่านั้น ซึ่งช่วยในการเข้าถึงองค์ประกอบปุ่มเพื่อจัดรูปแบบ:
< รหัสปุ่ม = 'บีทีเอ็นทู' > ปฏิเสธ ปุ่ม >
< รหัสปุ่ม = 'btn3' > ยอมรับ ปุ่ม >
ก่อนจัดรูปแบบผลลัพธ์จะมีลักษณะดังนี้:
ตอนนี้มาจัดรูปแบบปุ่มเหล่านี้ใน JavaScript โดยใช้ ' สไตล์ ' คุณสมบัติ. ขั้นแรก รับองค์ประกอบปุ่มทั้งหมดโดยใช้รหัสที่กำหนดด้วยความช่วยเหลือของ ' getElementById() ' วิธี:
ให้ตกลง = เอกสาร. getElementById ( 'btn1' ) ;ให้ปฏิเสธ = เอกสาร. getElementById ( 'บีทีเอ็นทู' ) ;
ให้ยอมรับ = เอกสาร. getElementById ( 'btn3' ) ;
ตั้งค่าสีพื้นหลังของปุ่มเหล่านี้โดยใช้ปุ่ม “ สไตล์ ' คุณสมบัติ:
เห็นด้วย. สไตล์ . สีพื้นหลัง = 'สีเขียว' ;ปฏิเสธ. สไตล์ . สีพื้นหลัง = 'สีแดง' ;
ยอมรับ. สไตล์ . สีพื้นหลัง = 'สีเหลือง' ;
อย่างที่คุณเห็น ปุ่มต่างๆ ได้รับการจัดรูปแบบเรียบร้อยแล้วโดยใช้ ' สไตล์ ' คุณสมบัติ:
วิธีที่ 2: เพิ่ม CSS ด้วย JavaScript โดยใช้วิธี “setAttribute()”
ในการเพิ่มสไตล์ CSS ใน JavaScript ให้ใช้ปุ่ม “ setAttribute() ' วิธี. ใช้เพื่อตั้งค่าหรือเพิ่มแอตทริบิวต์และค่าให้กับองค์ประกอบ HTML
ไวยากรณ์
ไวยากรณ์ต่อไปนี้ใช้สำหรับ ' setAttribute() ' วิธี:
ตัวอย่าง
ที่นี่ เราจะตั้งค่ารูปแบบต่างๆ ของปุ่มใน JavaScript โดยใช้ปุ่ม “ setAttribute() ' วิธี. ตั้งค่ารัศมีขอบของปุ่มทั้งหมดเป็น “ .5rem ” และสีข้อความของ “ เห็นด้วย ' และ ' ปฏิเสธ ” ปุ่มเพื่อ “ สีขาว '.
ปฏิเสธ. setAttribute ( 'สไตล์' , 'สีพื้นหลัง: สีแดง สี: สีขาว รัศมีเส้นขอบ: .5rem; ) ;
ยอมรับ. setAttribute ( 'สไตล์' , 'สีพื้นหลัง: สีเหลือง รัศมีเส้นขอบ: .5rem;' ) ;
เอาต์พุต
วิธีที่ 3: เพิ่ม CSS ด้วย JavaScript โดยใช้วิธี “createElement()”
หากคุณต้องการสร้างคลาสหรือรหัสในรูปแบบ JavaScript เช่นเดียวกับสไตล์ CSS ให้ใช้ปุ่ม “ สร้างองค์ประกอบ () ' วิธี. ใช้เพื่อสร้างองค์ประกอบใหม่แบบไดนามิก สำหรับสไตล์สร้าง ' สไตล์ ” องค์ประกอบโดยใช้วิธีนี้ “ createElement('สไตล์') ” วิธีการใน JavaScript ใช้เพื่อสร้างองค์ประกอบสไตล์ใหม่แบบไดนามิก ซึ่งสามารถใช้เพื่อเพิ่มสไตล์ CSS ลงในหน้าเว็บ
ไวยากรณ์
ไวยากรณ์ที่กำหนดใช้สำหรับ ' สร้างองค์ประกอบ () ' วิธี:
สำหรับการเพิ่มสไตล์ CSS ใน JavaScript ให้ใช้ไวยากรณ์ที่กำหนด:
คอสต์ สไตล์ = เอกสาร. สร้างองค์ประกอบ ( 'สไตล์' ) ;จากนั้นเพิ่มองค์ประกอบสไตล์ในแท็ก head โดยใช้ไวยากรณ์ด้านล่าง:
เอกสาร. ศีรษะ . ผนวกเด็ก ( สไตล์ ) ;ที่นี่, ' สไตล์ ” เป็นการอ้างอิงถึงองค์ประกอบสไตล์ที่สร้างขึ้นใหม่ และ “ เอกสาร. หัว ” เป็นองค์ประกอบส่วนหัวของเอกสาร HTML
ตัวอย่าง
ขั้นแรก สร้างองค์ประกอบสไตล์โดยใช้ปุ่ม “ สร้างองค์ประกอบ () ' วิธี:
ตอนนี้สร้าง ' พันล้าน ” คลาสสำหรับใช้สไตล์เดียวกันกับปุ่มและรหัสทั้งหมด “ btn1 ”, “ btn2 ' และ ' btn3 ” สำหรับรูปแบบปุ่มแต่ละปุ่ม:
สไตล์. HTML ภายใน = `. พันล้าน {
แบบอักษร - ขนาด : 1.1 รีโมต ;
การขยายความ : 3px ;
ขอบ : 2px ;
แบบอักษร - ตระกูล : ปราศจาก - เซอริฟ ;
ชายแดน - รัศมี : .5rem ;
}
#btn1 {
พื้นหลัง - สี : สีเขียว ;
สี : สีขาว ;
}
#btn2 {
พื้นหลัง - สี : สีแดง ;
สี : สีขาว ;
}
#btn3 {
พื้นหลัง - สี : สีเหลือง ;
}
` ;
ต่อท้ายองค์ประกอบสไตล์ที่ส่วนหัวของเอกสารโดยส่งเป็นพารามิเตอร์ไปที่ ' ผนวกเด็ก () ' วิธี:
เอกสาร. ศีรษะ . ผนวกเด็ก ( สไตล์ ) ; เอาต์พุต
นั่นคือทั้งหมดที่เกี่ยวกับการเพิ่ม CSS ใน JavaScript
บทสรุป
สำหรับการเพิ่ม CSS ด้วย JavaScript ให้ใช้รูปแบบอินไลน์รวมถึง “ สไตล์ ” ทรัพย์สิน และ “ setAttribute() ” เมธอด หรือการจัดสไตล์ส่วนกลางโดยใช้ “ สร้างองค์ประกอบ () ' วิธี. การกำหนดสไตล์โดยรวมจะมีประสิทธิภาพมากกว่าในขณะที่ไม่แนะนำให้ใช้วิธีการแบบอินไลน์ เนื่องจากจะทำให้ยากต่อการรักษารูปแบบของแอปพลิเคชัน และอาจนำไปสู่การทำซ้ำโค้ดได้ บทความนี้อธิบายวิธีการเพิ่ม CSS ด้วย JavaScript