ความแตกต่างระหว่าง scrollwidth, clientWidth, OffsetWidth

ทดสอบความแตกต่างระหว่างคุณสมบัติทั้งสามนี้ผ่านการสาธิต

ภาพประกอบ:

Scrollwidth: ความกว้างของเนื้อหาจริงของวัตถุความกว้างของเส้นที่ไม่มีขอบจะมีขนาดใหญ่ขึ้นเมื่อเนื้อหาในวัตถุเกินพื้นที่ดู

ClientWidth: ความกว้างของพื้นที่การดูของเนื้อหาวัตถุโดยไม่ต้องห่อเส้นสกรอลล์แถบสมดุลจะเปลี่ยนไปเมื่อขนาดการแสดงผลของวัตถุเปลี่ยนไป

OffsetWidth: ความกว้างที่แท้จริงของวัตถุโดยรวมแถบเลื่อนมีขอบเท่ากันซึ่งจะเปลี่ยนไปเมื่อวัตถุแสดงขนาด

การสาธิตทำให้องค์ประกอบ textarea ในหน้าและแสดงด้วยความกว้างและความสูงเริ่มต้น

สถานการณ์ที่ 1:

หากไม่มีเนื้อหาในองค์ประกอบหรือเนื้อหาไม่เกินพื้นที่ดูการเลื่อนจะไม่ปรากฏขึ้นหรือไม่พร้อมใช้งาน

Scrollwidth = ClientWidth ทั้งคู่เป็นความกว้างของพื้นที่การดูเนื้อหา

OffsetWidth เป็นความกว้างที่แท้จริงขององค์ประกอบ

สถานการณ์ที่ 2:

เนื้อหาขององค์ประกอบเกินพื้นที่ดูแถบเลื่อนจะปรากฏขึ้นและพร้อมใช้งาน

Scrollwidth> ClientWidth

Scrollwidth เป็นความกว้างของเนื้อหาจริง

ClientWidth เป็นความกว้างของพื้นที่ดูเนื้อหา

OffsetWidth เป็นความกว้างที่แท้จริงขององค์ประกอบ

จบ

ข้างต้นคือความแตกต่างทั้งหมดระหว่าง Scrollwidth, ClientWidth และ OffsetWidth ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน