ในกระบวนการสร้างเว็บเพจ บางครั้งคุณจำเป็นต้องทราบตำแหน่งที่แน่นอนขององค์ประกอบบนหน้าเว็บ
บทช่วยสอนต่อไปนี้สรุปความรู้ที่เกี่ยวข้องของ Javascript ในการวางตำแหน่งหน้าเว็บ
1. ขนาดของหน้าเว็บและขนาดของหน้าต่างเบราว์เซอร์
ขั้นแรก จะต้องชี้แจงแนวคิดพื้นฐานสองประการ
พื้นที่ทั้งหมดของหน้าเว็บคือขนาดของมัน โดยทั่วไป ขนาดของเว็บเพจจะถูกกำหนดโดยเนื้อหาและสไตล์ชีต CSS
ขนาดของหน้าต่างเบราว์เซอร์หมายถึงพื้นที่ของหน้าเว็บที่เห็นในหน้าต่างเบราว์เซอร์หรือที่เรียกว่าวิวพอร์ต
แน่นอนว่าหากเนื้อหาของหน้าเว็บสามารถแสดงได้อย่างสมบูรณ์ในหน้าต่างเบราว์เซอร์ (นั่นคือไม่มีแถบเลื่อนปรากฏขึ้น) ขนาดของหน้าเว็บและขนาดของหน้าต่างเบราว์เซอร์จะเท่ากัน หากไม่สามารถแสดงทั้งหน้าได้ ให้เลื่อนหน้าต่างเบราว์เซอร์เพื่อแสดงบางส่วนของหน้าเว็บ
2. รับขนาดของหน้าเว็บ
ทุกองค์ประกอบบนหน้าเว็บมีแอตทริบิวต์ clientHeight และ clientWidth คุณลักษณะทั้งสองนี้อ้างถึงพื้นที่ภาพที่ถูกครอบครองโดยส่วนเนื้อหาขององค์ประกอบบวกกับช่องว่างภายใน ไม่รวมพื้นที่ที่ถูกครอบครองโดยเส้นขอบและแถบเลื่อน
(รูปที่ 1 คุณสมบัติ clientHeight และ clientWidth)
ดังนั้นแอตทริบิวต์ clientHeight และ clientWidth ขององค์ประกอบเอกสารจึงแสดงถึงขนาดของหน้าเว็บ
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชัน getViewport(){
ถ้า (document.compatMode == "BackCompat"){
กลับ {
ความกว้าง: document.body.clientWidth,
ความสูง: document.body.clientHeight
-
} อื่น {
กลับ {
ความกว้าง: document.documentElement.clientWidth,
ความสูง: document.documentElement.clientHeight
-
-
-
ฟังก์ชั่น getViewport ข้างต้นสามารถคืนความสูงและความกว้างของหน้าต่างเบราว์เซอร์ได้ เมื่อใช้งาน มีสามสิ่งที่คุณต้องใส่ใจ:
1) จะต้องเรียกใช้ฟังก์ชันนี้หลังจากโหลดเพจแล้ว ไม่เช่นนั้นจะไม่มีการสร้างออบเจ็กต์เอกสารและเบราว์เซอร์จะรายงานข้อผิดพลาด
2) ในกรณีส่วนใหญ่ document.documentElement.clientWidth จะส่งกลับค่าที่ถูกต้อง อย่างไรก็ตาม ในโหมด quirks ของ IE6 document.body.clientWidth จะส่งกลับค่าที่ถูกต้อง ดังนั้นการพิจารณาโหมดเอกสารจึงถูกเพิ่มให้กับฟังก์ชัน
3) clientWidth และ clientHeight เป็นคุณสมบัติแบบอ่านอย่างเดียวและไม่สามารถกำหนดค่าได้
3. อีกวิธีหนึ่งในการเพิ่มขนาดของหน้าเว็บ
แต่ละองค์ประกอบบนหน้าเว็บยังมีคุณสมบัติ scrollHeight และ scrollWidth ซึ่งอ้างอิงถึงพื้นที่ภาพขององค์ประกอบรวมถึงแถบเลื่อน
จากนั้น คุณสมบัติ scrollHeight และ scrollWidth ของวัตถุเอกสารคือขนาดของเว็บเพจ ซึ่งหมายถึงความยาวและความกว้างทั้งหมดของแถบเลื่อน
หลังจากใช้ฟังก์ชัน getViewport() แล้ว ฟังก์ชัน getPagerea() ก็สามารถเขียนได้
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชัน getPagerea(){
ถ้า (document.compatMode == "BackCompat"){
กลับ {
ความกว้าง: document.body.scrollWidth,
ความสูง: document.body.scrollHeight
-
} อื่น {
กลับ {
ความกว้าง: document.documentElement.scrollWidth,
ความสูง: document.documentElement.scrollHeight
-
-
-
อย่างไรก็ตาม มีปัญหากับฟังก์ชันนี้ หากเนื้อหาของหน้าเว็บสามารถแสดงได้อย่างสมบูรณ์ในหน้าต่างเบราว์เซอร์โดยไม่มีแถบเลื่อน ดังนั้น clientWidth และ scrollWidth ของหน้าเว็บควรจะเท่ากัน แต่ในความเป็นจริงแล้ว เบราว์เซอร์ที่แตกต่างกันมีวิธีการประมวลผลที่แตกต่างกัน และค่าทั้งสองนี้ไม่จำเป็นต้องเท่ากันเสมอไป ดังนั้นเราจึงจำเป็นต้องหาค่าที่มากกว่าระหว่างกัน ดังนั้นเราจึงจำเป็นต้องเขียนฟังก์ชัน getPagerea() ใหม่
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชัน getPagerea(){
ถ้า (document.compatMode == "BackCompat"){
กลับ {
ความกว้าง: Math.max (document.body.scrollWidth,
document.body.clientWidth)
ความสูง: Math.max (document.body.scrollHeight,
document.body.clientHeight)
-
} อื่น {
กลับ {
ความกว้าง: Math.max (document.documentElement.scrollWidth,
document.documentElement.clientWidth)
ความสูง: Math.max (document.documentElement.scrollHeight,
document.documentElement.clientHeight)
-
-
-
4. รับตำแหน่งที่แน่นอนขององค์ประกอบหน้าเว็บ
ตำแหน่งที่แน่นอนขององค์ประกอบของหน้าเว็บหมายถึงพิกัดของมุมซ้ายบนขององค์ประกอบที่สัมพันธ์กับมุมซ้ายบนของหน้าเว็บทั้งหมด ตำแหน่งที่แน่นอนนี้สามารถหาได้จากการคำนวณ
ขั้นแรก แต่ละองค์ประกอบมีแอตทริบิวต์ offsetTop และ offsetLeft ซึ่งแสดงถึงระยะห่างระหว่างมุมซ้ายบนขององค์ประกอบและมุมซ้ายบนของคอนเทนเนอร์หลัก (วัตถุ offsetParent) ดังนั้นคุณเพียงแค่ต้องสะสมสองค่านี้เพื่อรับพิกัดสัมบูรณ์ขององค์ประกอบ
(รูปที่ 2 คุณลักษณะ offsetTop และ offsetLeft)
สามารถใช้ฟังก์ชันสองฟังก์ชันต่อไปนี้เพื่อรับค่า Abscissa และพิกัดของตำแหน่งสัมบูรณ์ได้
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น getElementLeft (องค์ประกอบ) {
var จริงซ้าย = element.offsetLeft;
ปัจจุบัน var = element.offsetParent;
ในขณะที่ (ปัจจุบัน !== null){
จริงซ้าย += ปัจจุบัน offsetLeft;
ปัจจุบัน = ปัจจุบัน offsetParent;
-
กลับจริงซ้าย;
-
ฟังก์ชั่น getElementTop (องค์ประกอบ) {
var realTop = element.offsetTop;
ปัจจุบัน var = element.offsetParent;
ในขณะที่ (ปัจจุบัน !== null){
จริงสูงสุด += ปัจจุบัน offsetTop;
ปัจจุบัน = ปัจจุบัน offsetParent;
-
กลับจริงด้านบน;
-
เนื่องจากในตารางและ iframe ออบเจ็กต์ offsetParent ไม่จำเป็นต้องเท่ากับคอนเทนเนอร์หลัก ฟังก์ชันข้างต้นจึงไม่ใช้กับองค์ประกอบในตารางและ iframe
5. รับตำแหน่งสัมพัทธ์ขององค์ประกอบหน้าเว็บ
ตำแหน่งสัมพัทธ์ขององค์ประกอบหน้าเว็บหมายถึงพิกัดของมุมซ้ายบนขององค์ประกอบสัมพันธ์กับมุมซ้ายบนของหน้าต่างเบราว์เซอร์
ด้วยตำแหน่งสัมบูรณ์ ทำให้ง่ายต่อการรับตำแหน่งสัมพัทธ์ เพียงลบระยะการเลื่อนของแถบเลื่อนของหน้าออกจากพิกัดสัมบูรณ์ ระยะห่างในแนวตั้งของแถบเลื่อนคือคุณสมบัติ scrollTop ของวัตถุเอกสาร ระยะห่างในแนวนอนของแถบเลื่อนคือคุณสมบัติ scrollLeft ของวัตถุเอกสาร
(รูปที่ 3 คุณลักษณะ scrollTop และ scrollLeft)
เขียนฟังก์ชันทั้งสองใหม่ในส่วนก่อนหน้าตามลำดับ:
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น getElementViewLeft (องค์ประกอบ) {
var จริงซ้าย = element.offsetLeft;
ปัจจุบัน var = element.offsetParent;
ในขณะที่ (ปัจจุบัน !== null){
จริงซ้าย += ปัจจุบัน offsetLeft;
ปัจจุบัน = ปัจจุบัน offsetParent;
-
ถ้า (document.compatMode == "BackCompat"){
องค์ประกอบ varScrollLeft=document.body.scrollLeft;
} อื่น {
องค์ประกอบ varScrollLeft=document.documentElement.scrollLeft;
-
กลับจริงองค์ประกอบซ้ายScrollLeft;
-
ฟังก์ชั่น getElementViewTop (องค์ประกอบ) {
var realTop = element.offsetTop;
ปัจจุบัน var = element.offsetParent;
ในขณะที่ (ปัจจุบัน !== null){
จริงสูงสุด += ปัจจุบัน offsetTop;
ปัจจุบัน = ปัจจุบัน offsetParent;
-
ถ้า (document.compatMode == "BackCompat"){
องค์ประกอบ varScrollTop=document.body.scrollTop;
} อื่น {
var elementScrollTop=document.documentElement.scrollTop;
-
กลับจริงองค์ประกอบด้านบนScrollTop;
-
คุณสามารถกำหนดค่าแอตทริบิวต์ scrollTop และ scrollLeft ได้ และจะเลื่อนหน้าเว็บไปยังตำแหน่งที่เกี่ยวข้องโดยอัตโนมัติทันที เพื่อให้สามารถใช้เพื่อเปลี่ยนตำแหน่งสัมพัทธ์ขององค์ประกอบหน้าเว็บได้ นอกจากนี้ เมธอด element.scrollIntoView() ยังมีเอฟเฟกต์ที่คล้ายกัน ซึ่งสามารถทำให้องค์ประกอบหน้าเว็บปรากฏที่มุมซ้ายบนของหน้าต่างเบราว์เซอร์ได้
6. วิธีที่รวดเร็วในการรับตำแหน่งขององค์ประกอบ
นอกจากฟังก์ชั่นข้างต้นแล้วยังมีวิธีที่รวดเร็วในการรับตำแหน่งขององค์ประกอบหน้าเว็บได้ทันที
นั่นคือการใช้เมธอด getBoundingClientRect() โดยส่งคืนออบเจ็กต์ที่มีแอตทริบิวต์สี่รายการ ได้แก่ ซ้าย ขวา บน และล่าง ซึ่งสอดคล้องกับระยะห่างระหว่างมุมซ้ายบนและมุมขวาล่างขององค์ประกอบตามลำดับซึ่งสัมพันธ์กับมุมซ้ายบนของหน้าต่างเบราว์เซอร์ (วิวพอร์ต)
ดังนั้นตำแหน่งสัมพัทธ์ขององค์ประกอบหน้าเว็บคือ
คัดลอกรหัสรหัสดังต่อไปนี้:
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
บวกกับระยะการเลื่อน คุณจะได้ตำแหน่งที่แน่นอน
คัดลอกรหัสรหัสดังต่อไปนี้:
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
ปัจจุบัน IE, Firefox 3.0+ และ Opera 9.5+ รองรับวิธีนี้ทั้งหมด แต่ Firefox 2.x, Safari, Chrome และ Konqueror ไม่รองรับ