สมมติว่า obj เป็นตัวควบคุม HTML
obj.offsetTop หมายถึงตำแหน่งบนที่คำนวณได้ของ obj ที่สัมพันธ์กับโครงร่างหรือพิกัดพาเรนต์ที่ระบุโดยแอตทริบิวต์ offsetParent, จำนวนเต็ม, หน่วยพิกเซล
obj.offsetLeft หมายถึงตำแหน่งด้านซ้ายที่คำนวณได้ของ obj ที่สัมพันธ์กับโครงร่างหรือพิกัดพาเรนต์ที่ระบุโดยแอตทริบิวต์ offsetParent, จำนวนเต็ม, หน่วยพิกเซล
obj.offsetWidth หมายถึงความกว้างสัมบูรณ์ของตัวควบคุม obj เอง ไม่รวมส่วนที่ไม่แสดงเนื่องจากการโอเวอร์โฟลว์ นั่นคือ ความกว้างที่ใช้จริง จำนวนเต็ม หน่วยพิกเซล
obj.offsetHeight หมายถึงความสูงสัมบูรณ์ของตัวควบคุม obj เอง ไม่รวมส่วนที่ไม่แสดงเนื่องจากการโอเวอร์โฟลว์ นั่นคือ ความสูงที่ใช้จริง เป็นจำนวนเต็ม หน่วยพิกเซล
มาอธิบาย offsetParent ที่กล่าวถึงก่อนหน้านี้
offsetParent รับการอ้างอิงถึงวัตถุคอนเทนเนอร์ที่กำหนดคุณสมบัติ offsetTop และ offsetLeft ของวัตถุ offsetTop และ offsetParent มีความซับซ้อนมาก เบราว์เซอร์ที่แตกต่างกันมีการตีความที่แตกต่างกัน และการตีความจะแตกต่างกันเมื่อลอยตัว ดังนั้นโดยทั่วไปเราเพียงต้องเข้าใจว่าตำแหน่งที่แน่นอนของการควบคุมในเบราว์เซอร์สามารถได้รับผ่านทั้งสอง
คุณสมบัติข้างต้นยังใช้ได้ใน FireFox
นอกจากนี้: สิ่งที่เรากำลังพูดถึงในที่นี้หมายถึงค่าแอตทริบิวต์ของตัวควบคุม HTML ไม่ใช่ document.body ค่าของ document.body มีการตีความที่แตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน (อันที่จริง สภาพแวดล้อมส่วนใหญ่เกิดจากการตีความเอกสารที่แตกต่างกัน body ไม่ได้เกิดจากการตีความออฟเซ็ตที่แตกต่างกัน)
เรารู้ว่า offsetTop สามารถรับตำแหน่งขององค์ประกอบ HTML จากด้านบนหรือด้านนอกองค์ประกอบ และยังสามารถใช้ style.top ความแตกต่างระหว่างทั้งสองคือ:
1. offsetTop ส่งคืนตัวเลข ในขณะที่ style.top ส่งคืนสตริง นอกจากตัวเลขแล้ว ยังมีหน่วย: px อีกด้วย
2. offsetTop เป็นแบบอ่านอย่างเดียว ในขณะที่ style.top สามารถอ่าน-เขียนได้
3. หากไม่ได้ระบุสไตล์ด้านบนสำหรับองค์ประกอบ HTML style.top จะส่งกลับสตริงว่าง
เช่นเดียวกับ offsetLeft และ style.left, offsetWidth และ style.width, offsetHeight และ style.height
ไคลเอนต์ความสูง
ทุกคนไม่คัดค้านความสูงของไคลเอ็นต์ พวกเขาทั้งหมดคิดว่ามันเป็นความสูงของพื้นที่ที่มองเห็นได้ของเนื้อหา กล่าวคือ ความสูงของพื้นที่ที่เนื้อหาสามารถมองเห็นได้ในเบราว์เซอร์ของหน้า คือพื้นที่ด้านล่างแถบเครื่องมือสุดท้ายและเหนือแถบสถานะ ซึ่งไม่เกี่ยวข้องกับเนื้อหาของหน้า
ชดเชยความสูง
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 เหมือนกับข้างต้น เพียงแทนที่ความสูงด้วยความกว้าง
แสดงให้เห็น
ข้อมูลข้างต้นอิงตาม DTD HTML 4.01 Transitional หากเป็น DTD XHTML 1.0 Transitional ความหมายจะแตกต่างออกไป ใน XHTML ค่าทั้งสามนี้เป็นค่าเดียวกันทั้งหมด ซึ่งบ่งบอกถึงความสูงที่แท้จริงของเนื้อหา เบราว์เซอร์เวอร์ชันใหม่ส่วนใหญ่รองรับการเปิดใช้งานล่ามที่แตกต่างกันตาม DOCTYPE ที่ระบุบนเพจ
scrollTop คือค่าความสูง "แบบม้วน" ตัวอย่าง:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="p">
<div id="t">หาก scrollTop ถูกตั้งค่าสำหรับ p เนื้อหาเหล่านี้อาจแสดงได้ไม่เต็มที่ </div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</สคริปต์>
เนื่องจาก scrollTop ถูกตั้งค่าสำหรับองค์ประกอบภายนอก p องค์ประกอบภายในจะเลื่อนขึ้น และส่วนที่ม้วนขึ้นคือ scrollTop
scrollLeft ก็คล้ายกัน
เรารู้อยู่แล้วว่า offsetHeight คือความกว้างขององค์ประกอบของตัวเอง และ scrollHeight คือความกว้างสัมบูรณ์ขององค์ประกอบภายใน รวมถึงส่วนที่ซ่อนอยู่ขององค์ประกอบภายในด้วย จากด้านบน scrollHeight ของ p คือ 300 และ offsetHeight ของ p คือ 100
scrollWidth คล้ายกัน
IE และ FireFox รองรับอย่างเต็มที่ ในขณะที่ Netscape 8 และ Opera 7.6 ไม่รองรับ scrollTop และ scrollLeft (ยกเว้น document.body.scrollTop และ document.body.scrollLeft)
1.clientHeight, ความกว้างของไคลเอ็นต์:
คุณสมบัติทั้งสองนี้แสดงความสูงและความกว้างของพิกเซลของเนื้อหาขององค์ประกอบโดยประมาณ การวัดเหล่านี้ไม่ได้คำนึงถึงการเพิ่มใดๆ ผ่านสไตล์ชีต
ขอบ เส้นขอบ ฯลฯ ในองค์ประกอบ
2.clientLeft ไคลเอนต์ด้านบน:
ทั้งสองส่งคืนความหนาของเส้นขอบรอบองค์ประกอบ หากคุณไม่ได้ระบุเส้นขอบหรือไม่ได้วางตำแหน่งองค์ประกอบ ค่าของมันจะเป็น 0
3.เลื่อนซ้าย,เลื่อนด้านบน:
หากองค์ประกอบเลื่อนได้ คุณสามารถใช้คุณสมบัติทั้งสองนี้เพื่อดูว่าองค์ประกอบเลื่อนไปในทิศทางแนวนอนและแนวตั้งได้ไกลแค่ไหน โดยมีหน่วยเป็นพิกเซล
สำหรับองค์ประกอบที่ไม่สามารถเลื่อนได้ ค่าเหล่านี้จะเป็น 0 เสมอ
4. scrollHeight, scrollWidth:
ไม่ว่าจะมองเห็นออบเจ็กต์บนเพจได้กี่ออบเจ็กต์ ก็ยังได้รับทั้งหมด
5.สไตล์ซ้าย:
การชดเชยขององค์ประกอบที่อยู่ในตำแหน่งจากขอบด้านซ้ายของสี่เหลี่ยมที่มี
6.style.pixelซ้าย:
ส่งกลับค่าพิกเซลจำนวนเต็มของการชดเชยเส้นขอบด้านซ้ายขององค์ประกอบที่อยู่ในตำแหน่ง เนื่องจากค่าที่ไม่ใช่พิกเซลของแอตทริบิวต์จะส่งคืนสตริงที่มีหน่วย เช่น 30px ใช้คุณลักษณะนี้เพื่อจัดการค่าเป็นพิกเซลแยกกัน
7.สไตล์:posLetf:
ส่งคืนค่าตัวเลขของออฟเซ็ตเส้นขอบด้านซ้ายขององค์ประกอบที่มีตำแหน่ง โดยไม่คำนึงถึงหน่วยที่ระบุโดยองค์ประกอบสไตล์ชีตที่เกี่ยวข้อง เนื่องจากค่าที่ไม่ใช่ตำแหน่งของแอตทริบิวต์จะส่งกลับสตริงที่มีหน่วย เช่น 1.2em
การเปรียบเทียบบางอย่างเช่น top, pixelTop, posTop ก็เพียงพอแล้ว
ซ้าย: คือตำแหน่งที่ย้ายจากซ้ายไปขวา นั่นคือ ระยะห่างระหว่างจี้กับขอบด้านซ้ายของหน้าจอ
clientLeft ส่งคืนค่าระยะห่างระหว่างค่าคุณสมบัติ offsetLeft ของวัตถุและค่าจริงทางด้านซ้ายของหน้าต่างปัจจุบัน
offsetLeft ส่งคืนค่าด้านซ้ายของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดของวัตถุหลัก โดยจะใช้มุมซ้ายบนของวัตถุหลักเป็นจุดเริ่มต้นของพิกัด และด้านขวาและล่างคือพิกัด x ในทิศทางบวกของ แกน X และ Y
pixelLeft ตั้งค่าหรือส่งคืนตำแหน่งของวัตถุที่สัมพันธ์กับด้านซ้ายของหน้าต่าง
scrollWidth คือความกว้างของเนื้อหาจริงของวัตถุ ไม่รวมความกว้างของขอบ และจะเปลี่ยนไปตามจำนวนเนื้อหาในวัตถุ (เนื้อหามากเกินไปอาจเปลี่ยนความกว้างจริงของวัตถุ)
clientWidth คือความกว้างที่มองเห็นได้ของวัตถุ ไม่รวมแถบเลื่อนและขอบอื่นๆ และจะเปลี่ยนไปตามขนาดการแสดงผลของหน้าต่าง
offsetWidth คือความกว้างที่มองเห็นได้ของวัตถุ รวมถึงแถบเลื่อนและขอบอื่นๆ และจะเปลี่ยนไปตามขนาดการแสดงผลของหน้าต่าง
IE6.0, FF1.06+:
clientWidth = ความกว้าง + ช่องว่างภายใน
clientHeight = ความสูง + ช่องว่างภายใน
offsetWidth = ความกว้าง + ช่องว่างภายใน + เส้นขอบ
offsetHeight = ความสูง + ช่องว่างภายใน + เส้นขอบ
IE5.0/5.5：
clientWidth = ความกว้าง - เส้นขอบ
clientHeight = ความสูง-เส้นขอบ
offsetWidth = ความกว้าง
offsetHeight = ความสูง
(จำเป็นต้องกล่าวถึง: แอตทริบิวต์มาร์จิ้นใน CSS ไม่เกี่ยวข้องกับ clientWidth, offsetWidth, clientHeight และ offsetHeight)
offsetwidth: คือความกว้างออฟเซ็ตขององค์ประกอบที่สัมพันธ์กับองค์ประกอบหลัก เท่ากับเส้นขอบ+ช่องว่างภายใน+ความกว้าง
clientwidth: คือความกว้างที่มองเห็นได้ขององค์ประกอบ เท่ากับช่องว่างภายใน+ความกว้าง
scrollwidth: คือความกว้างขององค์ประกอบรวมทั้งส่วนที่เลื่อนด้วย
offsetLeft: ตำแหน่งขององค์ประกอบ Html ที่สัมพันธ์กับองค์ประกอบ offsetParent ของตัวเอง
scrollLeft: ส่งกลับและตั้งค่าพิกัดของงานเลื่อนแนวนอนปัจจุบัน
คัดลอกรหัสรหัสดังต่อไปนี้:
<input type="button" value="คลิก" onclick="move()">
<div id="d" style="พื้นหลังสี:#ff9966; ตำแหน่ง:สัมบูรณ์; ซ้าย:170px; ด้านบน:100px;ความกว้าง:300;ความสูง:300;ล้น:เลื่อน"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่นย้าย ()
-
var d=document.getElementById("d")
a=ประเมินผล(20)
d.scrollLeft+=ก
-
</สคริปต์>
บันทึกเป็นหน้าเว็บ เรียกใช้ คลิกปุ่ม จากนั้นแถบเลื่อนจะเลื่อน
คลิกที่ div ขั้นแรกให้แสดงตำแหน่งของ b ที่สัมพันธ์กับ a จากนั้นจึงแสดงตำแหน่งของ a ที่สัมพันธ์กับหน้าต่าง