คุณสมบัติ offsetWidth
คุณสมบัติ offsetWidth มีความกว้างเต็ม
ขององค์ประกอบ (รวมถึงความกว้างขององค์ประกอบเอง,
ความกว้างของเส้นขอบ, ระยะเยื้องภายใน,
แถบเลื่อน):
ไวยากรณ์
องค์ประกอบ.offsetWidth;
ตัวอย่าง
เรามาดูขนาดเต็มขององค์ประกอบ:
<div id="elem"></div>
#elem {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.offsetWidth);
ผลลัพธ์จากการรันโค้ด:
150
ตัวอย่าง
หากองค์ประกอบถูกซ่อนอยู่, offsetWidth จะมีค่าเป็น
0:
<div id="elem"></div>
#elem {
display: none; /* องค์ประกอบที่ซ่อนอยู่ */
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.offsetWidth);
ผลลัพธ์จากการรันโค้ด:
0
ดูเพิ่มเติม
-
คุณสมบัติ
clientWidth,
ซึ่งมีความกว้างขององค์ประกอบภายในเส้นขอบ -
คุณสมบัติ
offsetHeight,
ซึ่งมีความสูงเต็มขององค์ประกอบ -
เมธอด
getComputedStyle,
ซึ่งรับค่าคุณสมบัติ CSS ขององค์ประกอบ
