คุณสมบัติHTML DOM scrollWidth
ตัวอย่าง
รับความสูงและความกว้างทั้งหมดขององค์ประกอบ รวมถึงการเติม:
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ scrollWidth ส่งกลับความกว้างทั้งหมดขององค์ประกอบเป็นพิกเซล รวมถึงการเติมแต่จะไม่แสดงเส้นขอบ แถบเลื่อน หรือระยะขอบ
เคล็ดลับ:ใช้ คุณสมบัติ scrollHeightเพื่อคืนค่าความสูงทั้งหมดขององค์ประกอบ
คุณสมบัติ scrollWidth และ scrollHeight จะคืนค่าความสูงและความกว้างทั้งหมดขององค์ประกอบ รวมถึงความสูงและความกว้างที่ไม่สามารถดูได้ (เนื่องจากล้น)
เคล็ดลับ:หากต้องการเพิ่มแถบเลื่อนให้กับองค์ประกอบ ให้ใช้ คุณสมบัติโอเวอร์โฟ ลว์ CSS
คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว
รองรับเบราว์เซอร์
Property | |||||
---|---|---|---|---|---|
scrollWidth | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
element.scrollWidth
รายละเอียดทางเทคนิค
คืนมูลค่า: | ตัวเลข แทนความกว้างทั้งหมด (แนวนอน) ขององค์ประกอบ หน่วยเป็นพิกเซล |
---|
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้ padding, border, scrollbar และ margin เพื่อแสดงว่าสิ่งนี้ส่งผลต่อคุณสมบัติ scrollWidth และ scrollHeight:
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
ตัวอย่าง
คืนค่า scrollHeight และ scrollWidth ขององค์ประกอบ จากนั้นตั้งค่าความสูงและความกว้างเป็นค่าที่ส่งคืนจาก scrollHeight และ scrollWidth:
var elmnt = document.getElementById("content");
function getFunction() {
var x = elmnt.scrollWidth;
var y = elmnt.scrollHeight;
}
function setFunction() {
elmnt.style.height = y.scrollHeight + "px";
elmnt.style.width = y.scrollWidth + "px";
}