ออฟเซ็ตท็อป
รับตำแหน่งบนสุดที่คำนวณได้ของวัตถุที่สัมพันธ์กับโครงร่างหรือพิกัดพาเรนต์ที่ระบุโดยคุณสมบัติ offsetParent
ชดเชยซ้าย
รับค่าตำแหน่งด้านซ้ายที่คำนวณได้ของวัตถุที่สัมพันธ์กับโครงร่างหรือพิกัดพาเรนต์ที่ระบุโดยคุณสมบัติ offsetParent
ชดเชยความสูง
รับค่าความสูงของวัตถุที่สัมพันธ์กับโครงร่างหรือพิกัดพาเรนต์ที่ระบุโดยคุณสมบัติ offsetParent
IE และ Opera เชื่อว่า offsetHeight = clientHeight + แถบเลื่อน + เส้นขอบ
NS และ FF ถือว่า offsetHeight เป็นความสูงจริงของเนื้อหาหน้าเว็บ ซึ่งอาจเล็กกว่า clientHeight
ความกว้างชดเชย
รับความกว้างของวัตถุที่สัมพันธ์กับโครงร่างหรือพิกัดพาเรนต์ที่ระบุโดยคุณสมบัติ offsetParent
ชดเชยผู้ปกครอง
รับการอ้างอิงไปยังวัตถุคอนเทนเนอร์ที่กำหนดคุณสมบัติ offsetTop และ offsetLeft ของวัตถุ
ไคลเอนต์ความสูง
รับค่าความสูงของวัตถุ โดยไม่นับระยะขอบ เส้นขอบ แถบเลื่อน หรือช่องว่างภายในที่อาจนำไปใช้กับวัตถุ
ทุกคนไม่คัดค้านความสูงของไคลเอ็นต์ พวกเขาทั้งหมดคิดว่ามันเป็นความสูงของพื้นที่ที่มองเห็นได้ของเนื้อหา กล่าวคือ ความสูงของพื้นที่ที่เนื้อหาสามารถมองเห็นได้ในเบราว์เซอร์ของหน้า คือพื้นที่ด้านล่างแถบเครื่องมือสุดท้ายและเหนือแถบสถานะ ซึ่งไม่เกี่ยวข้องกับเนื้อหาของหน้า
ลูกค้าซ้าย
รับค่าระยะห่างระหว่างคุณสมบัติ offsetLeft และด้านซ้ายจริงของพื้นที่ไคลเอ็นต์
ลูกค้าท็อป
รับค่าระยะห่างระหว่างคุณสมบัติ offsetTop และด้านบนจริงของพื้นที่ไคลเอ็นต์
ไคลเอ็นต์ความกว้าง
รับความกว้างของวัตถุ โดยไม่นับระยะขอบ เส้นขอบ แถบเลื่อน หรือช่องว่างภายในที่อาจใช้กับวัตถุ
แอตทริบิวต์ SCROLL
เลื่อน
ตั้งค่าหรือรับว่าปิดการเลื่อนหรือไม่
scrollHeight
รับความสูงของการเลื่อนของวัตถุ
เลื่อนซ้าย
ตั้งค่าหรือรับระยะห่างระหว่างขอบซ้ายของวัตถุและขอบซ้ายสุดของเนื้อหาที่มองเห็นได้ในหน้าต่างในปัจจุบัน
scrollTop
ตั้งค่าหรือรับระยะห่างระหว่างด้านบนของวัตถุและด้านบนของเนื้อหาที่มองเห็นได้ในหน้าต่าง
scrollWidth
ได้รับความกว้างของการเลื่อนของวัตถุ คุณลักษณะเหตุการณ์
x
ตั้งค่าหรือรับพิกัด x-pixel ของตำแหน่งตัวชี้เมาส์ที่สัมพันธ์กับเอกสารหลัก
หน้าจอX
ตั้งค่าหรือรับพิกัด x ของตำแหน่งตัวชี้เมาส์ที่สัมพันธ์กับหน้าจอของผู้ใช้
ออฟเซ็ตX
ตั้งค่าหรือรับพิกัด x ของตำแหน่งตัวชี้เมาส์ที่สัมพันธ์กับวัตถุที่ทำให้เกิดเหตุการณ์
ลูกค้าX
ตั้งค่าหรือรับพิกัด x ของตำแหน่งตัวชี้เมาส์ที่สัมพันธ์กับพื้นที่ไคลเอนต์ของหน้าต่าง โดยที่พื้นที่ไคลเอนต์ไม่รวมตัวควบคุมและแถบเลื่อนของหน้าต่าง
ที่นี่เราพูดถึงการตีความ clientHeight, offsetHeight และ scrollHeight ของ document.body โดยเบราว์เซอร์สี่ตัว นี่คือ document.body หากเป็นตัวควบคุม HTML จะแตกต่างออกไป
เบราว์เซอร์ทั้งสี่นี้ ได้แก่ IE (Internet Explorer), NS (Netscape), Opera และ FF (FireFox)
ไคลเอนต์ความสูง
ทุกคนไม่คัดค้านความสูงของไคลเอ็นต์ พวกเขาทั้งหมดคิดว่ามันเป็นความสูงของพื้นที่ที่มองเห็นได้ของเนื้อหา กล่าวคือ ความสูงของพื้นที่ที่เนื้อหาสามารถมองเห็นได้ในเบราว์เซอร์ของหน้า คือพื้นที่ด้านล่างแถบเครื่องมือสุดท้ายและเหนือแถบสถานะ ซึ่งไม่เกี่ยวข้องกับเนื้อหาของหน้า
ชดเชยความสูง
IE และ Opera เชื่อว่า offsetHeight = clientHeight + แถบเลื่อน + เส้นขอบ NS และ FF ถือว่า offsetHeight เป็นความสูงจริงของเนื้อหาหน้าเว็บ ซึ่งอาจเล็กกว่า clientHeight
scrollHeight
IE และ Opera ถือว่า scrollHeight เป็นความสูงที่แท้จริงของเนื้อหาหน้าเว็บ ซึ่งอาจเล็กกว่า clientHeight NS และ FF ถือว่า scrollHeight เป็นความสูงของเนื้อหาหน้าเว็บ แต่ค่าขั้นต่ำคือ clientHeight พูดง่ายๆ
clientHeight คือความสูงของพื้นที่ที่มีการดูเนื้อหาผ่านเบราว์เซอร์
NS และ FF เชื่อว่า offsetHeight และ scrollHeight เป็นทั้งความสูงของเนื้อหาเว็บ แต่เมื่อความสูงของเนื้อหาเว็บน้อยกว่าหรือเท่ากับ clientHeight ค่าของ scrollHeight คือ clientHeight และ offsetHeight สามารถน้อยกว่า clientHeight ได้
IE และ Opera ถือว่า offsetHeight เป็นแถบเลื่อน clientHeight ในพื้นที่ที่มองเห็นได้บวกกับเส้นขอบ scrollHeight คือความสูงที่แท้จริงของเนื้อหาหน้าเว็บ
เหตุผลเดียวกัน
คำอธิบายของ clientWidth, offsetWidth และ scrollWidth เหมือนกับข้างต้น เพียงแทนที่ความสูงด้วยความกว้าง
แต่
FF ตีความ clientHeight แตกต่างกันใน DOCTYPE ที่แตกต่างกัน แต่ xhtml 1 trasitional ไม่ได้ตีความดังข้างต้น เบราว์เซอร์อื่นไม่มีปัญหานี้
js รับความสูงของหน้า
คัดลอกรหัสรหัสดังต่อไปนี้:
<สคริปต์>
ฟังก์ชัน getInfo()
-
วาร์ส = "";
s += "ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ:"+ document.body.clientWidth;
s += "ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ:"+ document.body.clientHeight;
s += "ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: "+ document.body.offsetWidth + " (รวมถึงความกว้างของขอบและแถบเลื่อน)";
s += "ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: "+ document.body.offsetHeight + " (รวมถึงความกว้างของขอบ)";
s += "ความกว้างของข้อความแบบเต็มของข้อความหน้าเว็บ:"+ document.body.scrollWidth;
s += "ความสูงของข้อความแบบเต็มของเนื้อหาหน้าเว็บ:"+ document.body.scrollHeight;
s += "ความสูงในการเลื่อนหน้าเว็บ (ff):"+ document.body.scrollTop;
s += "ความสูงในการเลื่อนหน้าเว็บ (เช่น):"+ document.documentElement.scrollTop;
s += "เลื่อนด้านซ้ายของหน้าเว็บ:"+ document.body.scrollLeft;
s += "ในส่วนหลักของหน้าเว็บ: "+ window.screenTop;
s += "ด้านซ้ายของส่วนข้อความของหน้าเว็บ:"+ window.screenLeft;
s += "ความสูงของความละเอียดหน้าจอ:"+ window.screen.height;
s += "ความกว้างของความละเอียดหน้าจอ:"+ window.screen.width;
s += "ความสูงของพื้นที่ทำงานที่หน้าจอมีอยู่:"+ window.screen.availHeight;
s += "ความกว้างของพื้นที่ทำงานของหน้าจอ:"+ window.screen.availWidth;
s += "การตั้งค่าหน้าจอของคุณคือ "+ window.screen.colorDepth +" บิตสี";
s += "การตั้งค่าหน้าจอของคุณ" + window.screen.deviceXDPI +" พิกเซล/นิ้ว";
// การแจ้งเตือน (s);
-
getInfo();
</สคริปต์>
ในการทดสอบในพื้นที่ของฉัน:
สามารถใช้ได้กับ IE, FireFox, Opera
document.body.clientWidth
document.body.clientHeight
ใช้ได้ ง่าย สะดวก
และในโครงการของบริษัท:
Opera ยังคงใช้อยู่
document.body.clientWidth
document.body.clientHeight
แต่ใช้ IE และ FireFox
document.documentElement.clientWidth
document.documentElement.clientHeight
ปรากฎว่ามาตรฐาน W3C กำลังก่อปัญหา
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
หากคุณเพิ่มแท็กบรรทัดนี้ลงในเพจ
ในไออี:
document.body.clientWidth ==> ความกว้างของวัตถุ BODY
document.body.clientHeight ==> ความสูงของวัตถุ BODY
document.documentElement.clientWidth ==> ความกว้างของพื้นที่ที่มองเห็นได้
document.documentElement.clientHeight ==> ความสูงของพื้นที่ที่มองเห็นได้
ในไฟร์ฟ็อกซ์:
document.body.clientWidth ==> ความกว้างของวัตถุ BODY
document.body.clientHeight ==> ความสูงของวัตถุ BODY
document.documentElement.clientWidth ==> ความกว้างของพื้นที่ที่มองเห็นได้
document.documentElement.clientHeight ==> ความสูงของพื้นที่ที่มองเห็นได้
ในโอเปร่า:
document.body.clientWidth ==> ความกว้างของพื้นที่ที่มองเห็นได้
document.body.clientHeight ==> ความสูงของพื้นที่ที่มองเห็นได้
document.documentElement.clientWidth ==> ความกว้างของวัตถุหน้า (นั่นคือ ความกว้างของวัตถุ BODY บวกกับความกว้างของขอบ)
document.documentElement.clientHeight ==> ความสูงของวัตถุหน้า (นั่นคือ ความสูงของวัตถุ BODY บวกความสูงของระยะขอบ)
และหากไม่มีมาตรฐาน W3C กำหนดไว้แล้ว
ไออีคือ:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox คือ:
document.documentElement.clientWidth ==> ความกว้างของวัตถุหน้า (นั่นคือ ความกว้างของวัตถุ BODY บวกกับความกว้างของขอบ) document.documentElement.clientHeight ==> ความสูงของวัตถุหน้า (นั่นคือ ความสูงของวัตถุ BODY บวกความสูงของขอบ)
โอเปร่าคือ:
document.documentElement.clientWidth ==> ความกว้างของวัตถุหน้า (นั่นคือ ความกว้างของวัตถุ BODY บวกกับความกว้างของขอบ) document.documentElement.clientHeight ==> ความสูงของวัตถุหน้า (นั่นคือ ความสูงของวัตถุ BODY บวกความสูงของขอบ)
เป็นเรื่องที่ยุ่งยากจริงๆ ที่จริงแล้ว จากมุมมองของการพัฒนา จะสะดวกกว่ามากที่จะมีวัตถุและวิธีการน้อยลง และไม่ใช้มาตรฐานล่าสุด