ในการสร้างการออกแบบเว็บเพจแบบไดนามิกและพิกเซลที่สมบูรณ์แบบ การวัดขนาดหน้าต่างถือเป็นสิ่งสำคัญมากในการทำความเข้าใจและใช้งาน เค้าโครงหน้าเว็บที่ต้องการอาจไม่ถูกสร้างขึ้นหากไม่ได้ทำการวัดหน้าต่างหรือใช้อย่างถูกต้อง ขออภัย HTML/CSS ไม่ได้ระบุแอตทริบิวต์หรือคุณสมบัติใดๆ เพื่อรับความรู้ที่ถูกต้องเกี่ยวกับขนาดหน้าจอหน้าต่างและระยะห่างของหน้าต่างจากขอบเขตหน้าจอเดิม
โชคดี! JavaScript แก้ไขปัญหานี้โดยระบุ “ window.screenLeft” และ “window.screenTop” ” คุณสมบัติในการวัดตำแหน่งของหน้าต่างทั้ง ” x” และ “แกน y ” ตามลำดับ จุดสนใจหลักของเราในบทความนี้คือการได้ตำแหน่งตามแกน X ด้วยความช่วยเหลือของ “ window.screenLeft ' คุณสมบัติ. เอาล่ะ มาเริ่มกันเลย!
บล็อกนี้จะอธิบายขั้นตอนการใช้หรือเข้าถึงคุณสมบัติ window.screenLeft ใน JavaScript
จะเข้าถึงคุณสมบัติ“ window.screenLeft” ใน JavaScript ได้อย่างไร
“ window.screenLeft ” คุณสมบัติของ JavaScript ส่งคืนข้อมูลที่เกี่ยวข้องกับตำแหน่งแนวนอนของหน้าต่างโดยสัมพันธ์กับหน้าจอ คุณสมบัตินี้ส่งคืนค่าตัวเลขในรูปแบบพิกเซล โดยแสดงระยะห่างแนวนอนของหน้าต่างจากหน้าจอ เยี่ยมชมโค้ดด้านล่างซึ่งใน “ window.screenLeft ” ทรัพย์สินกำลังถูกใช้:
< ร่างกาย >
< h1 สไตล์ = 'สี: เขียวน้ำทะเล;' > ลินุกซ์ < / h1 >
< พี รหัส = 'เป้า' > < / พี >
< สคริปต์ >
ให้ i = window.screenLeft;
document.getElementById('เป้าหมาย').innerHTML = 'ซ้าย: ' + i;
< / สคริปต์ >
< / ร่างกาย >
คำอธิบายของรหัสข้างต้น:
- อันดับแรก HTML “ พี ” องค์ประกอบถูกสร้างขึ้นด้วยรหัสของ “ เป้า '.
- ต่อไป “ window.screenLeft ” คุณสมบัติถูกใช้ภายใน “< สคริปต์ >” ติดแท็กและเก็บผลลัพธ์ไว้ในตัวแปร “ ฉัน '.
- จากนั้นเลือกองค์ประกอบที่มีรหัสเป็น “ เป้า ’ และใส่ค่าของ “ i” ตัวแปรโดยใช้ “ ภายในHTML ' คุณสมบัติ.
การแสดงตัวอย่างหน้าเว็บมีดังนี้:
ผลลัพธ์แสดงระยะห่างในแนวนอนจากขอบเขตหน้าจอด้านซ้ายเป็นศูนย์พิกเซล
ตัวอย่าง: การดึงค่าแนวนอนแบบไดนามิก
คุณสมบัติ screenLeft สามารถใช้ร่วมกับ ' ปรับขนาด ” ตัวฟังเหตุการณ์เพื่อให้ตำแหน่งแบบเรียลไทม์ของหน้าต่างที่สอดคล้องกับหน้าจอตามแนวแกน x ในทำนองเดียวกัน ตำแหน่งตามแนวแกน y หรือแกนแนวตั้งสามารถดึงข้อมูลได้โดยใช้ปุ่ม “ window.screenTop ' คุณสมบัติ. มามีรหัสสำหรับสถานการณ์ที่กำหนด:
< ร่างกาย >< h1 สไตล์ = 'สี: เขียวน้ำทะเล;' > ลินุกซ์คำแนะนำ < / h1 >
< พี รหัส = 'ทดสอบ' >< / พี >
< สคริปต์ >
ฟังก์ชั่นไดนามิก ( ) {
ปล่อยให้ฉัน = หน้าต่างหน้าจอซ้าย;
ให้เจ = หน้าต่างหน้าจอด้านบน;
document.getElementById ( 'ทดสอบ' ) .innerHTML = 'ตำแหน่งจากทิศทางซ้าย:' + ฉัน + ', จากทิศทางบนสุด: ' + เจ;
}
window.addEventListener ( 'ปรับขนาด' , พลวัต ) ;
< / สคริปต์ >
คำอธิบายของโค้ดข้างต้นมีดังนี้:
- ขั้นแรก องค์ประกอบเป้าหมายได้ถูกสร้างขึ้นโดยมีรหัสเป็น “ ทดสอบ '.
- ถัดไป “< สคริปต์ >” ใช้แท็ก และ “ พลวัต ()” ฟังก์ชันถูกสร้างขึ้นในนั้น
- ภายในฟังก์ชันให้ใช้เครื่องหมาย “ window.screenLeft” และ “window.screenTop” ” คุณสมบัติและเก็บไว้ใน “ ฉัน” และ “เจ ” ตัวแปรตามลำดับ
- หลังจากนั้น เลือกองค์ประกอบเป้าหมายโดยรับรหัส “ ทดสอบ ” และด้วยความช่วยเหลือของ “ ภายในHTML ” คุณสมบัติแสดงค่าของทั้งสอง “ ฉัน” และ “เจ ” ตัวแปรบนหน้าเว็บ
- ในตอนท้ายให้แนบ ' ปรับขนาด ” ผู้ฟังเหตุการณ์ด้วย “ หน้าต่าง ” ที่เรียก “ พลวัต ()” ทุกครั้งเมื่อมีการเปลี่ยนขนาดหน้าต่าง
ตัวอย่างหน้าเว็บหลังจากสิ้นสุดการรวบรวม:
ในผลลัพธ์ด้านบน หน้าต่างที่แตกต่างจากด้านบนและด้านซ้ายจะได้รับเป็นพิกเซลเมื่อหน้าต่างถูกปรับขนาด
นั่นคือทั้งหมดที่เกี่ยวกับ “ หน้าต่าง.หน้าจอซ้าย ” คุณสมบัติใน JavaScript
บทสรุป
เพื่อเข้าถึง “ window.screenLeft ” คุณสมบัติใน JavaScript และแนบ “ ปรับขนาด ” ผู้ฟังเหตุการณ์ของ “ หน้าต่าง '. ซึ่งจะเรียกใช้ฟังก์ชันโทรกลับทุกครั้งที่ปรับขนาดหน้าต่าง ภายในฟังก์ชันนี้ ให้สร้างตัวแปรที่เก็บ ' window.screenLeft ' คุณสมบัติ. นอกจากนี้ ให้ดึงข้อมูลการอ้างอิงขององค์ประกอบเป้าหมายและแสดงค่าของตัวแปรนี้เหนือองค์ประกอบนั้น บล็อกนี้ได้อธิบายกระบวนการเข้าถึงคุณสมบัติ window.screenLeft ใน JavaScript