สรุปวิธีการสำหรับการได้รับความสูงและความกว้างและที่ตั้งของหน้าเว็บใน JS

วัตถุหน้าจอ

รับความสูงและความกว้างของหน้าจอ (ความละเอียด)

 Screen.width // Wide Screen.height // High Screen.availWidth // หน้าจอสามารถใช้เพื่อลบค่าหลังจากความสูงของส่วนประกอบระบบ AVailHeight // หน้าจอสามารถใช้เพื่อลบความกว้างพิกเซลของส่วนประกอบระบบ

วัตถุหน้าต่าง

รับตำแหน่งหน้าต่างและขนาด

 window.screentop // ระยะทางจากด้านบนของหน้าต่างไปด้านบนของหน้าต่างหน้าจอหน้าจอ // ระยะทางจากด้านซ้ายของหน้าต่างไปทางด้านซ้ายของหน้าต่างหน้าจอ IninnerWidth // ความกว้างของมุมมองในการแจ้งเตือนหน้าต่าง (window.innerWidth); // Chrome 1366 FF 1366 IE 1366 Window.innerHeight // ความสูงของมุมมองในหน้าต่างค่านี้เกี่ยวข้องกับปัจจัยต่าง ๆ เช่นว่าเบราว์เซอร์แสดงแถบเมนู ฯลฯ แจ้งเตือน (window.innerHeight); // Chrome 643 FF 657 IE 673Window.outerWidth // ความกว้างของหน้าต่างเบราว์เซอร์เอง (ความกว้างของพื้นที่ที่มองเห็นได้ + ความกว้างของเบราว์เซอร์) การแจ้งเตือน // Chrome 1366 FF 1382 IE 1382 // ระบุว่าเมื่อโครเมี่ยมขยายใหญ่ที่สุดหน้าต่างเบราว์เซอร์จะไม่มีความกว้างของเส้นขอบและเมื่อไม่ได้รับการขยายให้ใหญ่ที่สุดจะมีความกว้างของเส้นขอบ 8px // ff และ IE ขึ้นไปด้านซ้ายและขวา) // Chrome 728 FF 744 IE 744

วัตถุองค์ประกอบ

ก่อนที่จะแนะนำความสูงและความกว้างต่าง ๆ ของวัตถุองค์ประกอบจำเป็นต้องอธิบายโมเดลกล่อง

กล่องรุ่นเริ่มต้น box-sizing:content-box;

 BoxWidth = 2*มาร์จิ้น + 2*เส้นขอบ + 2*padding + widthboxHeight = 2*margin + 2*border + 2*padding + ความสูง

เมื่อไม่มีแถบเลื่อนปรากฏขึ้น

 Body {margin: 0;}#demo {width: 100px; ความสูง: 100px; Padding: 10px; ชายแดน: 20px; มาร์จิ้น: 30px; พื้นหลังสี: สีแดง;} <div id = "ตัวอย่าง"> 123456789 123456789 </div>

ClientWidth: ส่งคืนความกว้างที่มองเห็นได้ของเนื้อหาในหน้า (ไม่รวมเส้นขอบระยะขอบหรือแถบม้วน)

ClientHeight: ส่งคืนความสูงที่มองเห็นได้ของเนื้อหาในหน้า (ไม่รวมพรมแดนระยะขอบหรือแถบเลื่อน)

 clientWidth = 2*padding + width - scrollbarwidth console.log (document.getElementById ('demo'). clientWidth); // 120 ณ เวลานี้ scrollbarwidth = 0clientheight = 2*padding + ความสูง - scrollbarheight console.log (document.getElementById ('demo'). clientheight); // 120 ในเวลานี้ scrollbarwidth = 0

OffsetWidth: ส่งคืนความกว้างขององค์ประกอบรวมถึงเส้นขอบและการเติม แต่ไม่รวมมาร์จิ้น

Offsetheight: ส่งคืนความสูงขององค์ประกอบรวมถึงเส้นขอบและการเติม แต่ไม่รวมมาร์จิ้น

 OffsetWidth = 2*Border + 2*Padding + Width Console.log (document.getElementById ('demo'). OffsetWidth) // 160OffSetHeight = 2*Border + 2*Padding + ความสูง console.log (document.getElementById ('demo')

Offsetleft: รับตำแหน่งซ้ายที่คำนวณได้ของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติ Offsetleft

OFFSETTOP: รับตำแหน่งด้านบนที่คำนวณได้ของวัตถุที่สัมพันธ์กับเลย์เอาต์หรือพิกัดหลักที่ระบุโดยคุณสมบัติ Oftsettop

 console.log (document.getElementById ('demo'). Offsetleft) //30console.log(document.getElementByid('Demo').offSettop) // 30

เมื่อแถบเลื่อนปรากฏขึ้น

 ร่างกาย {มาร์จิ้น: 0; Padding: 20px; ความกว้าง: 1000px; ความสูง: 500px;} <div id = "demo"> 123456789123456789 </div>

Scrollwidth: ส่งคืนความกว้างทั้งหมดขององค์ประกอบ (รวมถึงสถานที่ซ่อนด้วยแถบเลื่อน)

Scrollheight: ส่งคืนความสูงขององค์ประกอบทั้งหมด (รวมถึงสถานที่ซ่อนด้วยแถบเลื่อน)

 Scrollwidth = 2*การขยาย + width console.log (document.body.scrollwidth) // 1040Scrollheight = 2*padding + width console.log (document.body.scrollheight) // 540

Scrolltop: ความสูงของเนื้อหาที่ซ่อนอยู่องค์ประกอบเมื่อเลื่อนบล็อกสโครลลง เมื่อไม่ได้ตั้งค่าค่าเริ่มต้นคือ 0 และค่าของมันจะเปลี่ยนเป็นบล็อกเลื่อนเลื่อน

Scrollleft: ความกว้างของเนื้อหาที่ซ่อนอยู่เมื่อเลื่อนบล็อกเลื่อนไปทางขวา เมื่อไม่ได้ตั้งค่าค่าเริ่มต้นคือ 0 และค่าของมันจะเปลี่ยนเป็นบล็อกเลื่อนเลื่อน

วัตถุเหตุการณ์

วัตถุเหตุการณ์แสดงถึงสถานะของเหตุการณ์เช่นองค์ประกอบที่เหตุการณ์เกิดขึ้นสถานะของคีย์บอร์ดคีย์บอร์ดตำแหน่งของเมาส์และสถานะของปุ่มเมาส์

Event.pagex: สัมพันธ์กับพิกัดของทั้งหน้ามุมซ้ายบนของหน้าคือระยะทางแนวนอนจากต้นกำเนิดของพิกัดไปจนถึงจุดที่เมาส์ตั้งอยู่ (IE8 ไม่รองรับ)

Event.pagey: สัมพันธ์กับพิกัดของทั้งหน้ามุมบนซ้ายของหน้าคือระยะทางแนวตั้งจากต้นกำเนิดของพิกัดไปจนถึงจุดที่เมาส์ตั้งอยู่ (IE8 ไม่รองรับ)

Event.Clientx: พิกัดของพื้นที่ภาพสัมพัทธ์โดยใช้มุมซ้ายบนของพื้นที่มองเห็นเบราว์เซอร์เป็นระยะทางแนวนอนจากต้นกำเนิดของพิกัดไปจนถึงจุดที่เมาส์ตั้งอยู่โดยใช้มุมบนซ้ายของพื้นที่มองเห็นเบราว์เซอร์

Event.Clienty: พิกัดของพื้นที่ภาพสัมพัทธ์โดยใช้มุมซ้ายบนของพื้นที่มองเห็นเบราว์เซอร์เป็นระยะทางแนวตั้งจากต้นกำเนิดพิกัดไปยังจุดที่เมาส์ตั้งอยู่โดยใช้มุมซ้ายบนของพื้นที่มองเห็นเบราว์เซอร์เป็นระยะทางแนวตั้งจากจุดกำเนิดพิกัดไปยังจุด

Event.screenx: สัมพันธ์กับพิกัดของหน้าจอคอมพิวเตอร์ระยะทางแนวนอนจากจุดกำเนิดพิกัดไปจนถึงจุดที่เมาส์ตั้งอยู่โดยใช้มุมซ้ายบนของหน้าจอเป็นระยะทางแนวนอนจากจุดกำเนิดพิกัดไปยังจุดที่เมาส์ตั้งอยู่

Event.screeny: สัมพันธ์กับพิกัดของหน้าจอคอมพิวเตอร์ระยะทางแนวตั้งจากจุดกำเนิดพิกัดไปจนถึงจุดที่เมาส์ตั้งอยู่โดยใช้มุมซ้ายบนของหน้าจอเป็นระยะทางแนวตั้งจากจุดกำเนิดพิกัดไปยังจุดที่เมาส์ตั้งอยู่

Event.offsetx: สัมพันธ์กับพิกัดของตัวเองระยะทางแนวนอนจากจุดกำเนิดพิกัดของมุมซ้ายบนของช่องเสียบของตัวเองไปยังจุดที่เมาส์ตั้งอยู่บนพื้นฐานของระยะทางแนวนอนจากต้นกำเนิดพิกัดของพิกัดไปจนถึงจุดที่เมาส์ตั้งอยู่

Event.offsety: สัมพันธ์กับพิกัดของตัวเองระยะทางแนวนอนจากจุดกำเนิดพิกัดของมุมซ้ายบนของช่องว่างภายในของตัวเองจนถึงจุดที่เมาส์ตั้งอยู่บนพื้นฐานของระยะทางแนวนอนจากแหล่งกำเนิดพิกัด

สรุป

ข้างต้นเป็นบทสรุปของวิธีการรับความสูงและตำแหน่งต่าง ๆ ของหน้าเว็บใน JS ซึ่งให้ความสะดวกสบายสำหรับทุกคนเมื่อเรียนรู้ JS เพื่อนที่ต้องการสามารถอ้างถึงได้