คู่มือนี้อธิบายรายละเอียดเกี่ยวกับวัตถุประสงค์และการทำงานของคุณสมบัติ 'สไตล์' ขององค์ประกอบ HTML DOM ใน JavaScript
คุณสมบัติ 'สไตล์' ขององค์ประกอบ HTML DOM ทำงานใน JavaScript อย่างไร
HTML DOM “ สไตล์ ” เป็นคุณสมบัติแบบอ่านอย่างเดียวที่ทำงานตามคุณสมบัติการจัดรูปแบบที่จัดสรรตามนั้น นอกจากนี้ยังคืนค่า “ CSSStyleDeclaration ” วัตถุที่มีแอตทริบิวต์สไตล์อินไลน์ทั้งหมดขององค์ประกอบ HTML เฉพาะ
บันทึก: อ็อบเจ็กต์ “CSSStyleDeclaration” มีแอตทริบิวต์สไตล์ CSS ที่กำหนดไว้ในส่วนหัว
ไวยากรณ์ (ตั้งค่าคุณสมบัติสไตล์)
องค์ประกอบ. สไตล์ . คุณสมบัติ = ค่าตามไวยากรณ์ข้างต้น ' สไตล์ ” คุณสมบัติรองรับพารามิเตอร์เดียวเท่านั้น “ ค่า ” ที่แสดงถึงค่าของคุณสมบัติสไตล์ที่ระบุ
ไวยากรณ์ (ส่งคืนคุณสมบัติสไตล์)
องค์ประกอบ. สไตล์ . คุณสมบัติลองใช้ไวยากรณ์ของคุณสมบัติ 'สไตล์' ที่กล่าวถึงข้างต้นในทางปฏิบัติ
ตัวอย่างที่ 1: ใช้คุณสมบัติ 'style' เพื่อตั้งค่าสีขององค์ประกอบ HTML เฉพาะ
ตัวอย่างนี้ใช้ไวยากรณ์พื้นฐานของ ' สไตล์ คุณสมบัติ ” เพื่อตั้งค่าของคุณสมบัติ “สไตล์” เพื่อให้สีขององค์ประกอบ HTML เฉพาะเปลี่ยนไป
รหัส HTML
ขั้นแรก ให้อ่านโค้ด HTML ที่กำหนด:
< ชั่วโมง2 > ใช้คุณสมบัติสไตล์ใน JavaScript ชั่วโมง2 >
< รหัส h3 = 'H3' > หัวเรื่องย่อยที่สอง h3 >
ในบรรทัดรหัสด้านบน:
- “ ” แท็ก HTML ระบุหัวข้อย่อยแรก
- “ แท็ก ” สร้างหัวข้อย่อยที่สองของระดับ 3 ด้วยรหัสที่กำหนด “H3”
รหัสจาวาสคริปต์
ถัดไป ทำตามรหัส JavaScript ที่ระบุไว้:
< สคริปต์ >เอกสาร. getElementById ( 'H3' ) . สไตล์ . สี = 'สีเขียว' ;
สคริปต์ >
ในข้อมูลโค้ดข้างต้น ' document.getElementById() ” วิธีการเข้าถึงรวม “ ” องค์ประกอบผ่านรหัสของมัน “ H3 ” เพื่อตั้งค่าที่ระบุ “ สี ” ค่าแอตทริบิวต์ขององค์ประกอบผ่านทาง “ สไตล์.สี ' คุณสมบัติ.
เอาต์พุต
ผลลัพธ์แสดงว่าการแสดงภาพองค์ประกอบ HTML เป้าหมายถูกตั้งค่าตามนั้นโดยใช้คุณสมบัติ 'สไตล์'
ตัวอย่างที่ 2: ใช้คุณสมบัติ 'style' เพื่อรับค่าของแอตทริบิวต์ 'style' ที่ใช้
ในตัวอย่างนี้ คุณสมบัติ 'สไตล์' ช่วยในการค้นหาแอตทริบิวต์ 'สไตล์' ที่กำหนดขององค์ประกอบ HTML โดยใช้ไวยากรณ์ทั่วไป (ส่งคืนคุณสมบัติสไตล์)
รหัส HTML
รหัส HTML ระบุไว้ที่นี่:
< ชั่วโมง2 > ใช้คุณสมบัติสไตล์ใน JavaScript ชั่วโมง2 >< รหัส h3 = 'H3' สไตล์ = 'สีพื้นหลัง:สีส้ม;' > ค่าของสีพื้นหลังของหัวข้อย่อยที่สองคือ : h3 >
< รหัส h4 = 'การสาธิต' > h4 >
ในรหัสนี้:
- “ ” แท็ก HTML ใช้แอตทริบิวต์ “style” ที่กำหนดสีพื้นหลังขององค์ประกอบ HTML “
”
- “ ” แท็กสร้างหัวข้อย่อยว่างของระดับ 4 ที่มีรหัส “ การสาธิต '.
รหัสจาวาสคริปต์
ตอนนี้ ดูรหัส JavaScript ที่กำหนด:
< สคริปต์ >เนื้อหา ค่า = เอกสาร. getElementById ( 'H3' ) . สไตล์ . สีพื้นหลัง ;
เอกสาร. getElementById ( 'การสาธิต' ) . HTML ภายใน = ค่า ;
สคริปต์ >
ในรหัสที่เขียนไว้ด้านบน:
- ตัวแปร “ ค่า ” ถูกประกาศด้วย “ เนื้อหา ” คำสำคัญที่ใช้ “ document.getElementById() ” วิธีการดึงองค์ประกอบ “
” โดยใช้ id เพื่อรับค่าของแอตทริบิวต์ “style” ที่ใช้และนำไปใช้กับองค์ประกอบเช่น “
” ผ่านคุณสมบัติ “style”
- เมธอด “document.getElementById()” ถูกใช้อีกครั้งเพื่อเข้าถึงองค์ประกอบ “
” ที่ว่างเปล่าที่เพิ่มเข้ามา และแสดงค่าของแอตทริบิวต์ “style” ที่จัดสรรเทียบกับองค์ประกอบ HTML ที่ดึงมา และต่อท้ายเป็นหัวข้อย่อยผ่าน “ HTML ภายใน ' คุณสมบัติ.
เอาต์พุต
ผลลัพธ์จะใช้สีพื้นหลังกับองค์ประกอบและค่าของแอตทริบิวต์ชุด 'style' จะถูกส่งกลับตามนั้น
บทสรุป
JavaScript ใช้ ' สไตล์ คุณสมบัติ ” เพื่อกำหนดและส่งกลับคุณสมบัติ “สไตล์” แบบอินไลน์ขององค์ประกอบ HTML DOM ต้องใช้ 'ค่า' เพิ่มเติมเพื่อใช้ฟังก์ชันที่ต้องการตามนั้น นอกจากการตั้งค่าและการดึงข้อมูลแล้ว การเปลี่ยนแอตทริบิวต์ “สไตล์” ที่มีอยู่ยังมีประโยชน์อีกด้วย คู่มือนี้แสดงวัตถุประสงค์หลัก การทำงาน และการใช้งานจริงของคุณสมบัติสไตล์องค์ประกอบ HTML DOM