HTML DOM Element offsetWidth property

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

offsetWidth ປະສົມແມ່ນກັບຂະໜາດທີ່ສາມາດເບິ່ງເຫັນຂອງບັນຊີ (ຖືກສາມາດເບິ່ງໄດ້ໂດຍຄວາມມັດລະບົບປະມານ) ທີ່ມີການກະຕຸ້ມແລະບານ, ບານ, ແລະການສາຍແຜ່ນຂັບເຄື່ອງຍົກ (ບໍ່ມີການກະຕຸ້ມສະໜາມ), ແຕ່ບໍ່ມີການກະຕຸ້ມສະໜາມ.

offsetWidth ປະສົມແມ່ນບໍ່ສາມາດເປັນປະສົມທີ່ສາມາດເຮັດການດັດແປງໄດ້.

ບໍ່ອອກຈາກ:ການສອນກັບການຮູບແບບວຽກສາຍລະບົບ CSS

offsetParent

ທຸກປະເພດສະຖານະປະກອບບັນຊີທີ່ມີການລະບຸວ່າກັບພະຍາຍາມຂວາງທີ່ກັບພະຍາຍາມທີ່ຈະຖືກນຳໃຊ້ທີ່ສຸດທີ່ມີການກະຕຸ້ມທີ່ບໍ່ຈະກະຕຸ້ມສະຖານະນະ:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

ພະຍາຍາມຂວາງກ່ວາກາຍໄດ້ກ່າວເພື່ອກວ່າມີການກະຕຸ້ມທີ່ບໍ່ຈະກະຕຸ້ມສະຖານະນະ.

ຖ້າບໍ່ມີພະຍາຍາມຂວາງທີ່ຈະຖືກນຳໃຊ້ ຂະໜາດຂວາງແມ່ນກັບຫຼັກກະຕຸ້ມແບບຂອງເອກະສານ.

ບໍ່ອອກຈາກ:

ປະສົມຂະໜາດຂວາງ

ປະສົມພະຍາຍາມຂວາງ

ປະສົມຂວາງຕົ້ນ

ປະສົມຂວາງຕົ້ນ

ປະສົມຂວາງເທິງ

ປະສົມຂວາງຊ້າຍ

ປະສົມວາງ

ປະສົມເພີ່ມ

ຄົນທີ່ພະຍາຍາມ

ຕົວຢ່າງ 1

ເອົາຂະໜາດ ແລະ ວາງຂອງ "myDIV" ລວມທັງການກະຕຸ້ມແລະບານ:

const elmnt = document.getElementById("myDIV");
let text = "ຂະໜາດທີ່ມີການກະຕຸ້ມແລະບານ: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Try it yourself

Example 2

Difference between clientHeight/clientWidth and offsetHeight/offsetWidth

Without scrollbar:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Try it yourself

With scrollbar:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Try it yourself

Syntax

element.offsetWidth

Return Value

Type Description
Number The visible width of the element (in pixels), including padding, border, and scrollbar.

Browser Support

All browsers support element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support