ความแตกต่างระหว่าง offsetHeight และ clientHeight

154

ใน javascript dom ความแตกต่างระหว่าง offsetHeight และ client ความสูงขององค์ประกอบคืออะไร

javascript

— สตีฟ
แหล่งที่มา

นี่เป็นตัวอย่างการสาธิตที่ดีjsfiddle.net/shibualexis/yVhgM/3

— GibboK

คำตอบ:

203

ความสูงของลูกค้า :

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

ชดเชยความสูง :

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

ดังนั้นoffsetHeightรวมแถบเลื่อนและเส้นขอบclientHeightด้วย

— Oded
แหล่งที่มา

อีกสิ่งหนึ่งที่ฉันสังเกตเห็นคือไคลเอ็นต์ความสูงจะเร็วกว่าออฟเซ็ตความสูงมาก คุณมีความคิดใด ๆ ว่าทำไม?

— disc0dancer

@ disc0dancer - อาจเป็นเพราะเบราว์เซอร์ที่มีอยู่แล้วclientSizeพร้อมใช้งาน (หลังจากทั้งหมดมันเป็นวิวพอร์ต) แต่ต้องการคำนวณoffsetHeightหลังจากการรีโฟลว์เอกสารทั้งหมดหรือไม่

— Oded

ผู้ตรวจสอบ webkit บอกว่าการ reflow นั้นอยู่ในเอกสารทั้งหมดด้วยเช่นกันแม้ว่าจะขอให้ลูกค้าสูงก็ตาม

— disc0dancer

@ disc0dancer - มากสำหรับฉันเดา แต่นี่คือสิ่งที่นำไปใช้งาน - ไม่แน่ใจว่าเบราว์เซอร์ทั้งหมดเป็นเช่นนั้น

— Oded

คำตอบจาก Oded เป็นทฤษฎี แต่ทฤษฏีและความเป็นจริงนั้นไม่ได้เหมือนกันเสมอไปอย่างน้อยก็ไม่ได้สำหรับองค์ประกอบ <BODY> หรือ <HTML> ซึ่งอาจมีความสำคัญสำหรับการเลื่อนการทำงานในจาวาสคริปต์

Microsoft มีภาพลักษณ์ที่ดีในMSDN :

ความสูงของลูกค้า, OffsetHeight, ScrollHeight

หากคุณมีหน้า HTML ซึ่งแสดงแถบเลื่อนแนวตั้งคุณจะคาดหวังว่าองค์ประกอบ <BODY> หรือ <HTML> นั้นมีตัวเลื่อน ScrollHeight มากกว่า OffsetHeight ตามที่รูปภาพนี้แสดง สิ่งนี้เป็นจริงสำหรับ Internet Explorer รุ่นเก่าทั้งหมด

แต่มันไม่เป็นความจริงสำหรับ Internet Explorer 11 และไม่ใช่สำหรับ Firefox 36 อย่างน้อยในเบราว์เซอร์เหล่านี้ OffsetHeight เกือบจะเหมือนกับ ScrollHeight ซึ่งผิด

และในขณะที่ OffsetHeight อาจผิด ClientHeight ถูกต้องเสมอ

ลองรหัสต่อไปนี้ในเบราว์เซอร์ที่แตกต่างกันและคุณจะเห็น:

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

ในขณะที่ Internet Explorer รุ่นเก่าแสดงอย่างถูกต้อง:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

ผลลัพธ์จาก Firefox และ Internet Explorer 11 คือ:

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

ซึ่งแสดงให้เห็นอย่างชัดเจนว่า offsetHeight ผิดที่นี่ OffsetHeight และ ClientHeight ควรแตกต่างกันเพียงไม่กี่พิกเซลหรือเหมือนกัน

โปรดทราบว่า ClientHeight และ OffsetHeight อาจแตกต่างกันอย่างมากสำหรับองค์ประกอบที่ไม่สามารถมองเห็นได้เช่น <FORM> ที่ OffsetHeight อาจมีขนาดที่แท้จริงของ FORM ในขณะที่ ClientHeight อาจเป็นศูนย์

— Elmue
แหล่งที่มา