โพสต์นี้เขียนวัตถุประสงค์ การทำงาน และการใช้เมธอด “getComputedStyle()” ของ window object ใน JavaScript
เมธอด “getComputedStyle()” ของ Window Object ทำอะไรใน JavaScript
“ getComputedStyle() ” วิธีการส่งคืนวัตถุ “CSSStyleDeclaration” ที่มีคอลเลกชันของคุณสมบัติ CSS และค่าของมัน มันคำนวณคุณสมบัติการกำหนดสไตล์องค์ประกอบ HTML เป้าหมาย นอกจากนี้ยังมีบทบาทสำคัญในการคำนวณคุณสมบัติของสไตล์ของส่วนเฉพาะขององค์ประกอบ HTML
ไวยากรณ์
หน้าต่าง. getComputedStyle ( องค์ประกอบ , pseudoElement )
ในไวยากรณ์ข้างต้น:
- หน้าต่าง: เป็นวัตถุส่วนกลางที่แสดงถึงหน้าต่างเบราว์เซอร์
- องค์ประกอบ: มันระบุองค์ประกอบ HTML เฉพาะที่ต้องคำนวณสไตล์
- pseudoElement: หมายถึงส่วนขององค์ประกอบ HTML ที่กำหนด เช่น อักษรตัวแรก อักษรตัวสุดท้าย เป็นต้น
ส่วนต่อไปนี้แสดงภาพประกอบเชิงปฏิบัติของเมธอด “getComputedStyle()” ด้วยความช่วยเหลือของตัวอย่าง
รหัส HTML (รวมถึงรูปแบบ CSS)
ขั้นแรก ให้ดูภาพรวมของโค้ด HTML ต่อไปนี้:
< ศีรษะ >
< สไตล์ >
h3{
ขนาดตัวอักษร: 20px;
สีพื้นหลัง: เขียวเหลือง
}
< / สไตล์ >
< / ศีรษะ >
< ร่างกาย >
< ชั่วโมง2 > ใช้เมธอด getComputedStyle() ของ Window Object < / ชั่วโมง2 >
< h3 รหัส = 'การสาธิต' > ขนาดตัวอักษรขององค์ประกอบ HTML ที่กำหนดคือ: < / h3 >
< หน้า รหัส = 'ตัวอย่าง' >< / หน้า >
ในบรรทัดโค้ดด้านบน:
- “ <สไตล์> ” แท็กใช้สไตล์ที่ระบุไว้ของ “ องค์ประกอบ HTML
- ใน ' <เนื้อหา> ” ส่วนหัวข้อย่อยจะรวมอยู่ใน “ ”
- ถัดไป องค์ประกอบ “
” ที่มีรหัส “ การสาธิต ” ระบุหัวข้อย่อยที่สอง
- สุดท้ายนี้ “ ” แท็กหมายถึงย่อหน้าว่างที่มีรหัส “ ตัวอย่าง ” เพื่อแสดงคุณสมบัติ CSS ที่คำนวณขององค์ประกอบเป้าหมาย
บันทึก: โค้ด HTML นี้ถูกติดตามตลอดทั้งตัวอย่างที่ระบุไว้ในโพสต์นี้
ตัวอย่างที่ 1: การใช้เมธอด “getComputedStyle()” เพื่อคำนวณขนาดฟอนต์ขององค์ประกอบ HTML
ตัวอย่างนี้ใช้เมธอด “getComputedStyle()” เพื่อรับขนาดฟอนต์ขององค์ประกอบ HTML เป้าหมาย
รหัสจาวาสคริปต์
พิจารณารหัส JavaScript ที่ระบุไว้:
< สคริปต์ >คอสต์ องค์ประกอบ = เอกสาร. getElementById ( 'การสาธิต' ) ;
คอสต์ ออบ = หน้าต่าง. getComputedStyle ( องค์ประกอบ )
ให้ขนาด = คัดค้าน รับคุณสมบัติมูลค่า ( 'ขนาดตัวอักษร' ) ;
เอกสาร. getElementById ( 'ตัวอย่าง' ) . HTML ภายใน = ขนาด ;
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- ประกาศตัวแปร “ องค์ประกอบ ” ด้วยคำหลัก “const” ที่ใช้ “ getElementById() ” วิธีการเข้าถึงองค์ประกอบ “
” ผ่านรหัสของมัน “ การสาธิต '.
- หลังจากนั้นให้ใช้ “ getComputedStyle() ” วิธีการคำนวณคุณสมบัติ CSS ขององค์ประกอบ “
” ที่ดึงข้อมูลมา
- ต่อไป “ ขนาด ” ตัวแปรใช้ “ getPropertyValue() ” วิธีการที่คืนค่าของคุณสมบัติ CSS ที่ใช้ “ ขนาดตัวอักษร ” เป็นสตริง
- สุดท้าย เมธอด “getElementById()” เข้าถึงย่อหน้าว่างและแสดงค่าคุณสมบัติ CSS ที่คำนวณได้โดยใช้ “ HTML ภายใน ' คุณสมบัติ.
เอาต์พุต
ดังที่เห็น เอาต์พุตจะแสดงค่าขนาดแบบอักษรที่ใช้เทียบกับองค์ประกอบ HTML ที่สอดคล้องกัน เช่น “
”
ตัวอย่างที่ 2: การใช้เมธอด “getComputedStyle()” เพื่อคำนวณสีพื้นหลังขององค์ประกอบ HTML
ในตัวอย่างนี้ วิธีการที่กล่าวถึงจะใช้ในการคำนวณสีพื้นหลังขององค์ประกอบ HTML เฉพาะ:
< สคริปต์ >คอสต์ องค์ประกอบ = เอกสาร. getElementById ( 'การสาธิต' ) ;
คอสต์ ออบ = หน้าต่าง. getComputedStyle ( องค์ประกอบ )
ให้ bgcolor = คัดค้าน รับคุณสมบัติมูลค่า ( 'สีพื้นหลัง' ) ;
เอกสาร. getElementById ( 'ตัวอย่าง' ) . HTML ภายใน = bgcolor ;
สคริปต์ >
ในบล็อกโค้ดด้านบน ' getComputedStyle() ” วิธีการคำนวณ “ สีพื้นหลัง ” ขององค์ประกอบ “
” ที่มีรหัสเป็น “สาธิต” และส่งกลับค่าเป็น “rgb” ผ่าน “ getPropertyValue() ' วิธี.
เอาต์พุต
ผลลัพธ์จะแสดงสีพื้นหลังที่คำนวณขององค์ประกอบ HTML ที่ดึงมาอย่างชัดเจน
บทสรุป
JavaScript นำเสนอ “ getComputedStyle() ” วิธีการคำนวณคุณสมบัติการกำหนดรูปแบบ CSS ขององค์ประกอบ HTML เป้าหมาย ค่าที่คำนวณได้ของเมธอดนี้คือสตริงที่มีคุณสมบัติ CSS และค่าของมัน สามารถนำไปใช้ได้หลายวิธีโดยใช้ JavaScript เพื่อรับคุณสมบัติ CSS ขององค์ประกอบ HTML ใดๆ โพสต์นี้ให้มุมมองโดยละเอียดเกี่ยวกับวัตถุประสงค์ การทำงาน และการใช้เมธอด “getComputedStyle()” ของวัตถุหน้าต่างใน JavaScript